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

JS简易整页滚动

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

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

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

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

    17.4K00

    typecho当前页码和总页码的完美实现方式

    单纯的分页然人觉得很单调,网上能搜到的当前页码和总页码实现的方式大都修改源代码。 那么如何在不修改源代码,不使用插件的情况下,用模板实现当前页码和总页码的显示呢?...首先需要了解下代码 从typecho老版本源代码中可以找出的代码 记录的条数:$this->_total 当前页码:$this->_currentPage 总页码:$this->_totalPage 经测试...,记录的条数和当前页码模板中可以直接使用,于是问题卡在总页码上了。...于是费了点脑细胞,想出个解决办法 用记录的条数除以每页文章显示的条数,如果有余数让余数进一。...整理成代码,大概是这个样子:ceil(this->getTotal() / 菜鸟不用管上边的东西,模板里直接用下面的代码就好。 当前页码:<?

    89820

    JS滑动滚动的n种方式

    JS滑动滚动的n种方式 # 阅读本文,你将: 了解原生JS实现页面滚动的多种方式 了解这多种方式可以对应上的效果以及推荐的应用场景 多个滑动方面的坑以及相应(如果有)的解决方案 获得一些有用的函数...值: 如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。...那么,如果一个元素没有滚动条,采用的是transform模拟滚动,那么就无效咯 2.3 适用性检测 可以用下边的代码在控制台检测一下页面有没有任何一个地方的代码scrollTop不是0的 let elementList...区别是设置behavior为'smooth'后会平滑滚动 3.2 使用说明 如果场景要求我们滚动页面到某个元素的位置,此时可以使用window.scrollTo(); 如果场景要求我们滚动到某个可滚动父元素的位置...该api仅FireFox支持 7.1 基本用法 表示相对当前的滚动位置再滚动指定页数距离,行为表现接近于空格键(反向+Shift)控制滚动 例如window.scrollByPages(-1)表示向上滚动

    6.6K10

    js滚动加载(无限加载)(转)

    实现无限分页的过程大致如下: 1 视窗滚动到底部 2 触发加载,添加到现有内容的后面。 因此,可能会出现两种情况: 1 当页面的内容很少,没有出现滚动条。 2 当页面的内容很多,出现了滚动条。...针对这两种情况,需要理解几个概念: scrollHeight即真实内容的高度; clientHeight比较好理解,是视窗的高度,就是我们在浏览器中所能看到内容的高度; scrollTop是视窗上面隐藏掉的部分...实现的思路: 1 如果真实的内容比视窗高度小,则一直加载到超过视窗 2 如果超过了视窗,则判断下面隐藏的部分的距离是否小于一定的值,如果是,则触发加载。(即滚动到了底部)

    17.5K20
    领券