<!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. Java学习笔记22（List接口）

    List接口继承自Collection接口,自身具有三大特点: 1.有序集合:存入和取出的顺序一致: 2.此接口的用户可以对每个元素插入位置进行精确控制:可以通过索引操作元素 3.可以存储重复元素 L ...

  2. python day 06 作业

  3. HDU6043 17多校1 KazaQ's Socks 水题

    题目传送:http://acm.hdu.edu.cn/showproblem.php?pid=6043 Problem Description KazaQ wears socks everyday. ...

  4. Spring面向切面编程

    在使用面向切面编程时,我们可以在一个地方定义通用的共鞥,但是可以通过声明的方式定义这个功能要以何种方式在何处应用,而无需修改受影响的类.横切关注点可以被模块化为特殊的类,这些类被称为切面.这样的优点是 ...

  5. MySQL中的存储过程和函数使用详解

    一.对待存储过程和函数的态度 在实际项目中应该尽量少用存储过程和函数,理由如下: 1.移植性差,在MySQL中的存储过程移植到sqlsever上就不一定可以用了. 2.调试麻烦,在db中报一个错误和在 ...

  6. Spring cron表达式详解

    一个cron表达式有6个必选的元素和一个可选的元素,各个元素之间是以空格分隔的,从左至右,这些元素的含义如下表所示: 代表含义 是否必须 允许的取值范围 允许的特殊符号 秒 是 0-59 , - * ...

  7. python 加密 hashlib与hmac模块

    https://www.jb51.net/article/128911.htm hashlib模块简介: hashlib模块为不同的安全哈希/安全散列(Secure Hash Algorithm)和 ...

  8. python scrapy 爬虫实例

    1 创建一个项目 scrapy startproject basicbudejie 2 编写爬虫 import scrapy class Basicbudejie(scrapy.Spider): na ...

  9. L3-019 代码排版 （30 分)

    某编程大赛中设计有一个挑战环节,选手可以查看其他选手的代码,发现错误后,提交一组测试数据将对手挑落马下.为了减小被挑战的几率,有些选手会故意将代码写得很难看懂,比如把所有回车去掉,提交所有内容都在一行 ...

  10. MySQL安装配置错误\日常使用错误

    1.出现报错---应用程序无法正常启动0xc000007b 安装direct 9.0 安装vc++ 2005 安装vc++ 2008 安装vc++ 2012(x64和x86都要装) 安装 .NET4. ...