通常我们在浏览web页面时，当浏览到某个位置跳去了其它页面浏览后再回到开始时的那个页面时，浏览器会帮我们重新定位到我们离开页面时的位置，对于绝大多数场景来说，这确实是一个非常好的体验设计

最近看到微信阅读上面的本周推荐卡片的滚动动画效果，就想试试也实现一下。乍一看感觉只要做一下倾斜和移动的动画就可以了，其实主要的难点是如何做到无缝循环。

在 handleScroll 函数中，获取这个div的滚动距离，并将其保存到cookie，要想在页面一打开就让这个div自动滚动到上次滚动的位置

源于最近的一个移动端走马灯需求，使用 touchmove 事件，来触发走马灯的动画。但是在实际运行时发现，滑动走马灯的时候很容易触发页面自身垂直方向的滚动

用js判断html页面是否滚动到最底部了，当页面到达底部时候触发加载数据的操作，实现思路：window加上一个滚动监听，然后再判断滚动条是否到达底部，下面是代码的实现。

功能描述：一些业务场景，如弹框出现时，需要禁止页面滚动，这是兼容安卓和 iOS 禁止页面滚动的解决方案。

在移动端 WEB 开发的时候（小程序也雷同），如上录屏所示，如果页面超过一屏高度出现滚动条时，在 fixed 定位的弹窗遮罩层上进行滑动，它下面的内容也会跟着一起滚动，看起来好像事件穿透到下面的DOM元素上一样，我们姑且称之为滚动穿透。

隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。

默认一个页面只能同时存在一个window.onscroll函数。有的时候我们会引入工具的js框架，在框架中使用onscroll统一监听每个页面，但是在某个页面，我们可能还要使用onscroll来监控滚动条，完成具体某个业务逻辑，这是该怎么做呢？

在布局上所有的图片都是重叠的，即只要保证Y方向对齐即可，当前可见的图z-index层级最高。每隔3s中更换一张图片，使用setTimeout定时

移动端有可滚动的弹窗肯定会遇到的问题，滑动弹层背景跟着滚动，如果弹窗里面的内容不需要滚动的可以直接粗暴的把滚动事件禁用掉，但是如果弹窗内容过多需要滚动那就不可以这样做。以下这个解决办法在线上使用没有问题，可以大胆拿去用

主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。因为本文涉及了很多很多基础，是我自己学习记录的一个过程，如果上面列出的知识点都了然于胸了，就可以不必往下看了

一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色

当前容器已经滚动到底部或者顶部，无法再滚动，容器会默认选择上层容器进行滚动，可以说滚动贯穿并非是一个bug，只是一种现象

::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式，你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:::-webkit-scrollbar — 整个滚动条.::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).