浏览器滚动事件,浏览器

　　最近，我很忙。这一次，我花时间写作，陶冶情操。浏览器滚动真是一天比一天好。比如你现在看这篇文章，你要向下滚动。本文主要讲一些滚动相关的方法和属性。还有一些有趣的例子。文中涉及的方法或属性会在文末链接，方便大家自行查阅！

　　分类

　　根据我个人的理解，滚动可以分为全局滚动(浏览器窗口)和局部滚动(自定义框)。以下大部分内容指的是全局滚动。如果本地滚动，可以得到指定的DOM，然后调用相应的API。

　　如何设置全局滚动条高度

　　最常用的方法：

　　window.scrollTo(0，0)；//orwindow.scrollTo({ left: 0，top:100 })；您也可以使用相对滚动设置：

　　window.scrollBy(0，0)；//orwindow.scrollBy({ left: 0，top:100 })；或者使用滚动设置：

　　document . scrollingelement . scroll top=100；注意：scrollTo和scrollBy的参数是相同的，不同的是scrollBy的滚动距离是相对于当前滚动条位置的。

　　效果比较如下：

　　很明显，前者是将滚动高度设置为100，后者是每次增加100，这就是为什么叫相对滚动。

　　如何指定一个元素显示在视窗

　　最常用的方法：

　　//获取元素的offsetTop(元素到文档顶部的距离)let offsetTop=document . query selector(。方框)。offsettop//设置滚动条window.scrollTo的高度为(0，offsetTop)；效果如下：

　　或者使用锚点：

　　Href= # box 框出现在顶部/adiv id=box/div效果如下：

　　或者使用scrollIntoView进行演示：

　　document.querySelector(。方框)。scrollIntoView()；效果如下：

　　您还可以指定元素出现的位置：

　　//start出现在视区的顶部，center出现在视区的中心，end出现在视区的底部。document.queryselector(。方框)。scrollintoview({ block: start center end })；效果如下：

　　如何使用每种方法的参数设置将滚动设置为平滑过渡效果：

　　window . scroll to({ behavior: smooth })；window . scroll by({ behavior: smooth })；document.querySelector(。方框)。scrollIntoView({ behavior: smooth })；效果如下：

　　或者用css属性设置它：

　　html { scroll-behavior:smooth；//全局滚动有平滑效果}//或者全部* { scroll-behavior:smooth；}效果如下：

　　注意：设置该属性后，所有方法都可以从另一个中选择一个，而无需设置行为参数。因为它们都控制当前指定元素的滚动行为，所以锚点跳转和设置scrollTop也具有平滑滚动行为。

　　一些有趣的东西

　　1. scrollingElement

　　这个对象可以非常兼容地获取scrollTop、scrollHeight等属性，在移动端和PC端都经过了反复测试。

　　还记得我写这个兼容方法的时候吗：

　　let scroll height=document . document element . scroll height document . body . scroll height；现在你只需要：

　　let scroll height=document . scroll ingelement . scroll height；因为这是它在MDN中的介绍方式：

　　标准模式返回documentElement，怪异模式返回body；

　　2. 滚动到底部

　　window.scrollTo({ left: 0，top:document . scrolling element . scroll height })；//如果你真的很懒.window.scrollTo(0，999999)；注意：平滑地滚动到顶部或底部，并添加您自己的参数或属性。

　　3. 判断浏览器已滚动到底部

　　window . addevent listener( scroll ，()={ let { scrollTop，scrollHeight，client height }=document . scrolling element；//当前滚动高度viewport height=文档总高度if(scroll top client height=scroll height){ console . log(已到达底部)；}});效果如下：

　　函数节流

　　当您不添加函数节流时：

　　window . addevent listener( scroll ，()=console.log(我在滚动，我在滚动！));效果如下：

　　添加函数节流时：

　　window . addevent listener( scroll ，throttle (()=console.log(我在滚动，我在滚动！)));效果如下：

　　节流源代码：

　　函数throttle(fn，interval=500){ let run=true；返回函数(){ if(！运行)返回；run=falsesetTimeout(()={ fn.apply(this，arguments)；run=true}，区间)；};}有用性：降低代码执行的频率

　　函数防抖

　　添加防抖功能时：

　　window . addevent listener( scroll ，de bounce(()=console . log( scroll is over！)));效果如下：

　　去抖源代码：

　　函数去抖(fn，interval=500){ let time out=null；返回函数(){ clear time out(time out)；time out=setTimeout(()={ fn . apply(this，arguments)；}，区间)；};}有用性：判断一个动作的结束，比如滚动结束，输入结束等。

　　解决IOS设备局部滚动不顺畅(粘手)

　　除了浏览器本机滚动，自定义滚动条也会发生这种情况，这可以通过添加以下属性来解决：box {-WebKit-溢出-滚动：touch}比较如下：

　　注：需要真机才能看到效果。这里的本地滚动是指自己定义的框，然后设置溢出：auto scroll滚动行为后；

　　滚动传播

　　指的是有多个滚动区域，当一个滚动区域滚动完，连续滚动会蔓延到父区域继续滚动的行为：box { over scroll-behavior:contain；//停止滚动扩散}对比效果图如下：

　　横向滚动

　　移动终端更能满足这种需求，常用于图片显示：

　　ul li img src= /li //./ulul { white-space:nowrap；//无换行符溢出-x:超出autoLi { display:inline-block；img {显示：块；宽度：200px}}}效果如下：

　　滚动结束后，强制滚动到指定元素

　　基于上述示例，我们设置了以下属性：

　　ul { scroll-snap-type: x强制；Li { scroll-snap-align:start；}}效果如下：

　　如果你仔细观察，你会发现当我们松手时，我们会将最近的元素滚动到最右边(初始位置是Y轴的顶部，X轴的右侧)。

　　您也可以将其设定为出现在中间：

　　li { scroll-snap-align:居中；}效果如下：

　　这样，一个简单的旋转木马效果就出来了！

　　还可以实现全屏滚动：

　　注意：这个属性将在你滚动后被处理，这意味着你可以一次从图片1跳到图片9。

　　最后

　　上面提到的方法或属性文档如下：

　　滚动到滚动到视图滚动元素scroll-behavior-WebKit-overflow-scroll over scroll-behavior scroll-snap-type scroll-snap-align以上是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。