$(window).scroll()触发失效

标题$(window).scroll()触发失效

最近遇到一个问题，在项目中写了$(“window”).scroll()方法，但是在滚动页面的时候发现此方法没有触发，后来查找原因才发现是因为页面中的html或者body元素设置了overflow:auto样式才无法出发

解决方式：在页面结构布局完整的情况下将改样式去掉。

关于window.scroll系列方法汇总 & 滚动到指定元素位置
1.window.scroll()
概述
滚动窗口至文档中的特定位置。

语法

window.scroll(x-coord, y-coord)  // 参数表示想要置于左上角的像素点的横纵坐标

2.window.scrollBy()
概述
在窗口中按指定的偏移量滚动文档(相对于当前位置进行偏移)

语法

window.scrollBy(x-coord, y-coord); // 参数为横纵偏移量
window.scrollBy(options); // 参数是一个包含三个属性的对象{top,left,behavior}
    // top等同于y-coord,left等同于x-coord
    // behavior表示滚动行为: smoth(平滑滚动),instant (瞬间滚动)，默认值 auto(效果等同于instant)``

3.window.scrollTo()
该函数实际上与window.scroll是一样的,兼容性较差

参数与window.scrollBy()相同,都可传入对象

4.滚动到指定元素位置

var $wrapper = $('#wrapper');     // 父级容器
var $target = $('#target');    // 目标元素
$wrapper.scrollTop($target.offset().top - $wrapper.offset().top + $wrapper.scrollTop())
// 目标元素与视口的距离 - 父级容器与视口的距离 + 当前滚动条的位置

5.获取当前滚动条位置

let body = document.body;
body.scrollTop; // number, 目标元素当前的垂直滚动位置
body.scrollLeft; // number, 水平滚动位置

6.判断是否滚动到最底部

let body = document.body;
body.clientHeight; // 元素当前可视区域高度(不算隐藏的部分)
body.scrollHeight; // 元素滚动区域高度
// 滚动到底部
if(body.clientHeight + body.scrollTop == body.scrollHeight) {
    console.log('已滚动到底部')
}