首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS简易整页滚动

fullPage超简易版本 1.知识点 JS 滚动监听事件 JS 移动端touch监听事件 函数节流 DOM操作 2.示例GIF ?...CSS html, body设置 overflow 为 hidden, 让视图中只包括一个分页;设置滑动分页的长宽都是 100%; 外部容器设置 transition 过渡效果, 并设置为相对定位, 滚动是修改外部容器的...Top 值, 实现滚动效果. html, body { padding: 0; margin: 0; overflow: hidden; } .page-container { position...向下滚动时, 当 currentPosition 比 -整体分页高度 大的时候(绝对值相比小的时候), 向下滚动;向上滚动时, 当 currentPosition 大于 0 的时候, 向上滚动. /...滚动事件firefox与其他浏览器的事件不同, 所以需要进行判断. deltaY大于0的时候, 想下滚动; 反之, 向上滚动. var handlerWheel = throttle(scrollMove

15.6K31
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS判断滚动条是否停止滚动

    背景:昨天一个同事有种需求,有一个展示数据区域的div,带滚动条,当滚动滚动时,需要向后台发请求,计算数据,再拿到前台展示。        ...分析:由于数据量级别较大,所以当滚动滚动时,如果时时向后台发请求,对服务器和浏览器都造成巨大的压力。想到的解决方案是,当滚动条停止时,再去发请求计算数据。...那么问题来了,如何判断滚动条是否停止了呢?        解决:搜索了一下,js本身是无法判断滚动条是在滚动状态还是停止状态,只有通过其它方式了。...后来想到的思路是当滚动滚动的时候,发起一个定期执行的方法,并记录一次当前滚动条到顶部的距离,这个方法中判断此时滚动条到顶部的距离是否和上次记录的相等,如果相等,那么说明停止滚动了,不相等,还在滚动。...-- // 让浏览器出现滚动条 for(var i = 0; i < 100; i++) { document.write(""); } var topValue = 0,//

    17.4K00

    【交互探讨】无限滚动还是分页展示,这是个问题!

    您可能有一个冗长的搜索结果、产品、订单或数据条目列表。虽然您已经使用各种筛选程序以及排序和搜索,但是您还是需要帮助客户查找相关条目。为此,您需要系统支持来加快条目浏览速度。...也许有一点过时,但非常可靠:Thinkific.com.上的分页(大图预览) 另外,还能让用户控制页面上显示数据的多少(通常使用控件来更改每页项目展示的个数),每个页面的URL都不同,页脚很容易到达,页面上出现的内容的多少可以由用户自己选择...例如,我们可以在初始页面加载时显示10-30个产品项目(移动设备上显示10个,桌面设备上显示30个)。当用户到达列表末尾时,我们可以自动加载接下来的10-30个产品。...我们还可以允许他们在单独的页面上查看他们看到的所有产品,这样他们就可以将查看过的选项与所有选项分开。下面显示了这种交互的一个示例。...另外,我们可以直接展示通讯框,允许用户复制当前页面当前位置的链接。还有一个好处就是能让我们收集用户的电子邮件,以便稍后向他们发送有关新项目的提醒。 将文案改为“复制当前列表位置的链接”。

    3.2K20

    css滚动条样式修改_js设置滚动条样式

    CSS滚动条选择器 ::-webkit-scrollbar — 整个滚动条 ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头) ::-webkit-scrollbar-thumb...— 滚动条上的滚动滑块 ::-webkit-scrollbar-track — 滚动条轨道 ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分 ::-webkit-scrollbar-corner...— 当同时有垂直滚动条和水平滚动条时交汇的部分 ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮) ::-webkit-scrollbar...; overflow: auto; } /* 整个滚动条 */ .container::-webkit-scrollbar { width : 8px; } /* 滚动条里面滑块 */ ....container::-webkit-scrollbar-thumb { border-radius: 10px; background: skyblue; } /*滚动条里面轨道*/ .

    19.5K41
    领券