<!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. SharePoint Framework 构建你的第一个web部件（一）

    博客地址:http://blog.csdn.net/FoxDave SharePoint客户端web部件是出现在SharePoint页面的控件,但却是在浏览器本地运行的.他们是SharePoint ...

  2. [Spring]初识Spring-Spring的基础使用-如何通过Bean来实例化？

    Spring框架的基础使用 XML配置信息,Bean的不同实例化方式,注入 实例化 XML文件中的参数设置 1.通过构造器进行实例化(重点,常用方式) <bean name="aCls ...

  3. 二、先在SD卡上启动U-boot，再烧写新的U-boot进Nandflash

    1. 制作SD卡 先准备一张2G的SD卡(不能用8G的,2G的卡和8G的卡协议不一样),和烧写SD卡的工具write_sd以及需要烧写到SD卡中的u-boot-movi.bin.将SD卡格式化后连接到 ...

  4. Beta阶段冲刺---Day4

    一.Daily Scrum Meeting照片 二.今天冲刺情况反馈 昨天已完成的工作: (1)闯关模式排行榜代码编写: (2)闯关模式结束时的代码编写: (3)闯关模式开始时的代码编写. 今天计划完 ...

  5. Delphi 10.3最新消息

    因为Google Play的要求,使Delphi官方被动的透出点消息:https://community.embarcadero.com/blogs/entry/deadline-approachin ...

  6. 通过日志关键字检测判断obb程序是否工作正常

    C118+Osmocom-bb 多机 gsm sniff环境,经常发生工作一段时间后,某个手机监听的arfcn就不工作了. 检查日志发现,日志最后有连续的多条:TOA AVG is not 16 qb ...

  7. centos安装nginx和配置

    安装所需环境 Nginx 是 C语言 开发,建议在 Linux 上运行,当然,也可以安装 Windows 版本,本篇则使用 CentOS 7 作为安装环境. 一. gcc 安装安装 nginx 需要先 ...

  8. MAVEN JDK版本配置

    使用maven的时候,默认会使用1.5版本的JDK,并且也是编译成1.5的,我的电脑里面用的JDK是1.7的,1.8也出来了,没理由还用1.5的吧!所以我手动改成了1.7,郁闷的是,每次 maven- ...

  9. ：after和：before伪元素的解释

    :after  是清除浮动  让其高度和内容高度相同 :before   是防止上边塌陷 关注微信小程序

  10. 使用Chrome调试工具抢阿里云免费套餐

    活动地址如下: https://free.aliyun.com/ntms/free/experience/getTrial.html 首先打开地址,需要登录,登陆后看到如下页面: 选择个人免费套餐,这 ...