滚动轮加载的两种js方法及模态框拖拽归总

滚动轮加载的两种方法：

公共部分css及HTML：

*{
				padding: 0px;
				margin: 0px;
			}
			div{
				width: 300px;
				height: 300px;
				overflow-y: scroll;
				padding: 10px;
				border: 10px solid red;
			}

<div class="box">
			<p>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br></p>
			<p>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br></p>
			<p>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br></p>
			<p>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br></p>
			<p>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br></p>
		</div>

滚动轮加载的第一种js方法：

//获取元素
            var box = document.querySelector('.box');
            //运用监听 滚动事件
            box.addEventListener('scroll',function(){
                //此相加必须放置内部，因为每执行一次便相加
                var het=Math.ceil(box.scrollTop)+box.clientHeight;
                if(het>=box.scrollHeight){
                    //内部创建及添加指定内容
                    var p = document.createElement('p');
                    p.innerHTML = '您好';
                    box.appendChild(p);
                }
            })
         

滚动轮加载的第二种js方法：

//获取元素
            var box = document.querySelector('.box');
            //运用监听 滚动事件
            box.addEventListener('scroll', function() {
                if (box.offsetHeight + box.scrollTop > 1000) {
                    alert('已经到底');
                } else if (box.offsetHeight + box.scrollTop >= box.scrollHeight) {
                    var p = document.createElement('p');
                    p.innerHTML = '您好';
                    box.appendChild(p);
                }
            })
注：以上第二个方法的首个if语句中可以不适用aler，（提示：可以给出指定的p标签设置字体或者背景颜色，不用创建p标签，当大于1000时，直接显示，已经到底了，即可），如有粉丝不明，可以关注私信我，为您解答；

效果展示区：

模态框拖拽归总 ：

offset 偏移量
            offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（ 偏移）、 大小等
            offset 可以得到任意样式表中的样式值
            offset 系列获得的数值是没有单位的
            offsetWidth 包含padding + border + width
            offsetWidth 等属性是只读属性， 只能获取不能赋值
            offsetLeft 返回相对于父元素左边框的距离, 动态的
            offsetTop 返回相对于父元素上方的举例
            
 offset 与 style 区别 
            offsetWidth 数值是没有单位的
            offsetWidth 包含padding+border+width
            offsetWidth 只读属性，只能获取不能赋值
            
            style.width 获得的是带有单位的字符串，只获取行内样式。
            style.width 获得不包含padding和border 的值
            style.width 是可读写属性，可以获取也可以赋值
            总结：获取元素位置用offset ,修改元素属性值用style

拖拽原理
            1：mousedown 鼠标按压获取鼠标在登录框的宽度。
            2：mousemove 鼠标移动的时获取最新的pageX减去鼠标在登录框的X距离，就是模态框的left与top值。
            3：mouseup 鼠标松开时，移除mousemove 事件
          
 client概述
            通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
            clientTop  ：元素上边框大小
            clientLeft  ：元素左边框大小
            clientWidth：包括padding，不包括边框。
            clientHeight：包括padding，不包括边框。
            // client 宽度 和我们offsetWidth 最大的区别就是 不包含边框
            var div = document.querySelector('div');
            console.log(div.clientWidth);

scroll 概述
            我们使用 scroll 的相关属性可以动态的得到该元素的大小、滚动距离等。
            scrollTop：被滚动的上侧距离，返回数值，不带单位；
            scrollLeft：被滚动的左侧距离，返回数值，不带单位；
            scrollWidth：返回元素实际宽度，包括滚动的距离，不含边框，返回数值不带单位。
            scrollHeight：返回元素实际高度，包括滚动的距离，不含边框，不带单位。

归总：

1.offset系列 经常用于获得元素位置    offsetLeft  offsetTop 
2.client经常用于获取元素大小  clientWidth clientHeight
3.scroll 经常用于获取滚动距离 scrollTop  scrollLeft  
4.注意页面滚动的距离通过 window.pageXOffset  获得
核心原理：通过定时器 setInterval() 不断对容器进行处理。

注：以上归纳需要案例的朋友，点击关注，可以私信我哟！！！！