js怎么实现全屏滚动？

Question

https://www.douban.com/douban...
像豆瓣app下载这样的全屏滚动是怎么实现的？

Answer 1

搞几个div宽高百分百啊，用滚轮控制 上下切换啊，防止滚动抖动，或切换过快，可以开个 定时器 setTimeout 调节下。思路简单，试着自己写写嘛，才能进度哦

Answer 2

看到豆瓣用的是jQuery全屏滚动插件fullPage.js； 自己实现的话$(window).on('scroll',fn)监听事件；不过目测有些麻烦

Answer 3

善用github fullpage

Answer 4

百度：js如何实现全屏滚动的效果

Answer 5

用 fullpage 一般都是用这个

Answer 6

这种插件有很多写好 完善的JS

Answer 7

全屏滚动插件的实现原理是：所有滚动页面包在一个直接父级容器中，容器及容器内的页面取当前可视区高度，同时容器的直接父级元素 overflow 属性值设为 hidden，通过更改容器 transform 属性的 translate 或者 top 的值实现全屏滚动效果。

这里用原生 JS（主要 ES6 语法），不到 200 行代码写了一个全屏滚动插件，点这查看 demo，完整的源码在这pure_full_page