✨滑动事件

1.首先监听滚动条事件

window.addEventListener("scroll", this.handleScroll);

延伸document.documentElement  是什么

document.documentElement === document.querySelector("html")
// true

2.获取滚动条滚动位置及标签距离顶部距离

与scroll相关的方法

4个window对象下：scrollX、scrollY、scrollTo、scroll（作用和scrollTo一样）

4个Element对象下：scrollWidth、scrollHeight、scrollLeft、scrollTop

window对象下(BOM)

window.scrollX、window.scrollY

var x = window.scrollX;  // 以像素为单位，返回水平轴上document已经被卷去的宽度   number类型
var y = window.scrollY;  // 以像素为单位，返回垂直方向上document被卷曲的高度     number类型

pageYOffset 属性是 scrollY 属性的别名，pageXOffset同理，为了跨浏览器兼容，一般用后者（pageYOffset、pageXOffset）

window.scrollTo( x-coord, y-coord ) 

//MDN API原文：（以左上角为坐标原点，以像素为单位沿水平和垂直方向滚动到指定位置）
window.scroll( x-coord, y-coord ): 作用同 window.scrollTo()

Element对象下(DOM)：

element.clientHeight: 元素自身高度： 包含内边距，但不包括水平滚动条、边框和外边距
scrollTop：设置或获取该元素顶部距离其容器顶部的距离，无滚动条时为0

//获取滚动的高度（被卷去的高度）
var intElementScrollTop = element.scrollTop;

// 设置滚动的距离
element.scrollTop = intValue;

scrollLeft：读取或设置元素滚动条到元素左边的距离

//获取滚动条到元素左边的距离
var sLeft = element.scrollLeft;

//设置滚动条滚动了多少像素
element.scrollLeft = 10;

scrollHeight与scrollwidth

scrollWidth:只读属性，返回该元素内容区域宽度和自身宽度中较大的一个，若自身宽度大于内容宽度（存在滚动条），则scrollWidth>clientWidth.

注意：该属性返回的是四舍五入后的整数值，如果需要小数，请用：Element.getBoundingClientRect().

var xScrollWidth = element.scrollWidth;
 

scrollHeight：只读属性，返回该元素内容高度。包含被overflow隐藏掉的部分。包含padding，不包含margin.如果需要小数，请用：Element.getBoundingClientRect().

var yScrollHeight = element.scrollHeight;
应用点：（判断元素是否滚动到底部，底下等式若返回 true ，则是，否则不是）

element.scrollHeight - element.scrollTop === element.clientHeight;

scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。  //自身大小包括隐藏
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。 //肉眼可见区域。
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。  //像ie盒模型的宽度

 

兼容性代码如下：（获取、设置页面垂直方向的滚动距离！水平方向同理）（简易版）

//获取滚轮滚动的距离,适配所有的浏览器
function getScrollY(){
    return window.pageYOffset || document.documentElement.scrollTop;
}
//设置垂直方向滚轮滚动的距离,适配所有的浏览器，num为滚动距离
function setScrollY(num){
    document.body.scrollTop = document.documentElement.scrollTop = num;
}

2.办正事

 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;//获取去滚动条位置
 let offsetTop = document.querySelector("#center_box_lefts").offsetTop;//获取标签距离顶部位置

3.定义this.handleScroll方法，在方法中做判断处理。

handleScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      let offsetTop = document.querySelector("#center_box_lefts").offsetTop;
      scrollTop > 480 && scrollTop > offsetTop
        ? (this.searchBarFixed = true)
        : (this.searchBarFixed = false);
    }

4.定义变量，如果符合条件为true否则为false。

 searchBarFixed: "",//侧边导航吸顶

5.动态设置 :class，如果为true则设置为固定定位，否则随页面滚动。

 :class="searchBarFixed?('center_box_left_fxide'):('center_box_left')"

参考博客网址

    $(document).scroll(function() {
        var scroH = $(document).scrollTop();  //滚动高度
        var viewH = $(window).height();  //可见高度 
        var contentH = $(document).height();  //内容高度
     
        if(scroH >100){  //距离顶部大于100px时
     
        }
        if (contentH - (scroH + viewH) <= 100){  //距离底部高度小于100px
             
        }  
        if (contentH = (scroH + viewH)){  //滚动条滑到底部啦
             
        }  
     
    })