<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>js判断滚动条停止</title>

<style type="text/css">

    .box {

        height: 3000px;

    }

</style>

<script type="text/javascript">

    var topValue = 0, // 上次滚动条到顶部的距离

        interval = null; // 定时器

    document.onscroll = function() {

        if(interval == null) {

            // 未发起时，启动定时器，1秒1执行

            interval = setInterval(function() {

                if(document.documentElement.scrollTop == topValue) {

                    alert("scroll bar is stopping!");

                    clearInterval(interval);

                    interval = null;

                }

            }, 1000);

        }

        topValue = document.documentElement.scrollTop;

    }

</script>

</head>

    <div class="box"></div>

<body>

</body>

</html>

这个需求是我在写一个固钉的时候遇到的问题,当滚动条滚动时固钉隐藏,当停止滚动时固钉出现

js 判断滚动条是否停止滚动的更多相关文章

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js判断滚动条是否已到页面最底部或顶部实例

    原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...

  3. js判断用户是否正在滚动滚动条，滚动条滚动是否停止

    js智能判断是否可以自动滚动 比如,做一个音乐播放器,边播放,边定位歌词,播放的时候,需要自动定位到播放语句,但是用户去拖动或者滚动div(歌词面板)时,这时就必须停止自动滚动,或者说是不能自动滚动, ...

  4. 原生js判断手机端页面滚动停止

    var topValue = 0,// 上次滚动条到顶部的距离 interval = null;// 定时器 contactsList = document.getElementById(" ...

  5. js判断滚动条到底部

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容 ...

  6. IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部

    E/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到 ...

  7. js判断鼠标是否停止移动

    本程序实现当鼠标在一个特定的div内悬停n秒时,判断出已经停止移动. 思路: 1.定义全局变量鼠标移动状态imouse,定时器timer.当鼠标在div内移动时,imouse值为1,相反静止时值为0: ...

  8. JS判断滚动条到底部，页面是否有滚动条

    要判断页面滚动条是否到底,需要了解三个属性: scrollHeight:获取元素内容高度的度量,包括由于溢出导致的视图中不可见内容,说直白点,算上了滚动条不可见的那部分高度. clientHeight ...

  9. js 判断滚动条的滚动方向

    以下代码实现判断页面的滚动条的滚动方向: var sign = 80;//定义默认的向上滚与向下滚的边界 window.onscroll = window.onresize = function(){ ...

随机推荐

  1. php +apache +mysql 配置笔记

    2013年11月5日 14:27:46 php +apache +mysql 配置笔记 mysql 正常安装 忽略. 1,配置笔记:安装apache 的成功标志是:安装完成之后,在浏览器输入http: ...

  2. Oracle 一些注意点

    number精度问题 Number(p,s): p和s都是可选的. p指精度(precision),即总位数.默认情况下精度为38.精度的取值范围为1~38. s指小数位(scale),小数点右边的位 ...

  3. webstorm 自动编译ts

    1.在目录根目录添加tsconfig.json { "compileOnSave": false, "compilerOptions": { // 文件目录 & ...

  4. JAVA Clone复制对象

    谈到了对象的克隆,就不得不说为什么要对对象进行克隆.Java中所有的对象都是保存在堆中,而堆是供全局共享的.也就是说,如果同一个Java程序的不同方法,只要能拿到某个对象的引用,引用者就可以随意的修改 ...

  5. 性能测试-12.Web页面性能指标与建议

    1.页面加载时间 从页面开始加载到页面onload事件触发的时间.一般来说onload触发代表着直接通过HTML引用的CSS,JS,图片资源已经完全加载完毕. 2.全部页面加载时间 全部页面载入时间指 ...

  6. 原根的存在性及个数证明（Primitive Root Theorem）

    我在RSA学习总结的第三部分关于Mille-Rabin素数测试的正确性证明里需要用到此定理,由于证明太长,故另开一章于此.(为啥我说话突然文绉绉了Orz,可能是这周辩论打多了) 结论是对素数p,mod ...

  7. sharpkeys键盘按键重映射

    /********************************************************************** * sharpkeys键盘按键重映射 * 说明: * 键 ...

  8. Git版本退回和修改

    首先我们来看看我们的第一个版本: 我的git文件如下: 那我们来修改一下这个文件 然后提交 那我们来查看一下提交的记录:使用git log 当我们使用 git log --pretty=oneline ...

  9. Arrays 类的 binarySearch() 数组查询方法详解

    Arrays类的binarySearch()方法,可以使用二分搜索法来搜索指定的数组,以获得指定对象.该方法返回要搜索元素的索引值.binarySearch()方法提供多种重载形式,用于满足各种类型数 ...

  10. 2018.10.25 CCSP马拉松摸铜归来

    24号体测跑50+1000米. 50米抢跑被罚重跑???然后老年人就只能吊着一口仙气跑第二次50米.然后跑1000米,然后再到宿舍收拾行李赶往地铁站,然后再冲到火车站...(卒) 宾馆,三人挤入二人房 ...