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

通过 JS 判断页面是否有滚动简单方法

前言 最近在写插件过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁。最终通过参考不同方法,写了一个比较简单方法。...在判断滚动同时也需要计算滚动宽度,通过本篇文章一并与大家分享。 为什么要判断滚动条 ?...判断是否有滚动方法 其实只需要一行 JS 就可以,测试兼容 IE7 function hasScrollbar() { return document.body.scrollHeight >...计算滚动条宽度方法比较简单,新建一个带有滚动 div 元素,通过该元素 offsetWidth 和 clientWidth 差值即可获得,我在此借鉴 Magnific-popup 中方法 function...实现一个功能可能并不困难,但作为编程人员应该时刻思考如何更简单更优雅实现这个功能,并且时刻以提升用户体验为原则。

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

    简单三步实现banner轮播效果

    这里,抛开其他设计原型不说,只说说banner图片轮播,三步教你实现轮播效果,我用原型图软件是Mockplus。 把图片准备好,要开始了。 第一步:拖出“图片轮播”组件到工作区 ?...选中你所需要图片,可以多选,最多不能超过8个,按Ctrl键多选。点击打开就把选中图片放入图片轮播里面了。 ? 点击确定,就OK了。...第三步:演示,点击软件上方三角符号或直接按F5进入演示界面。 ? 如果需要调整其他属性,可以在属性面板里面选择。 1 是否选择指示器 2 指示器类型:圆点、方形、数字。...3 指示器方向:底、顶、左、右 4 指示器颜色 5 动画效果 6 播放间隔 是不是很简单很容易操作呢?

    1.4K100

    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.6K31

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

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

    17.4K00

    学习滚动插件iScroll简单使用

    目前有以下版本: iscroll.js,这个版本是常规应用脚本。它包含大多数常用功能,有很高性能和很小体积。 iscroll-lite.js,精简版本。...iscroll-probe.js,探查当前滚动位置是一个要求很高任务,这就是为什么我决定建立一个专门版本。如果你需要知道滚动位置在任何给定时间,这是iScroll给你。...(我正在做更多测试,这可能最终在常规iscroll.js脚本,请留意)。 iscroll-zoom.js,在标准滚动功能上增加缩放功能。...iscroll-infinite.js,可以做无限缓存滚动。处理很长列表元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在无限数量元素。...可以处理用户进行移动交互元素:滚动,缩放,平移,无限滚动,视差滚动,旋转等功能。

    2.9K30

    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.3K10

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

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

    17.5K20
    领券