<!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. ASCII码，utf-8

    ASCII:0-127表示英文,128-255每个国家编码不一样,汉字要使用两个字节,为了和0-127区别,首位都要是1,uriEncode就是把字符转换成ASCII码. utf-8,一个字节的,和a ...

  2. DataTable数据统计方法

    调用方法: public object Compute(string strExpression,string strFilter) 参数说明: strExpression:要计算的表达式字符串,基本 ...

  3. 5-log4j2.xml配置文件各个节点详解

    具体配置参考官网:http://logging.apache.org/log4j/2.x/manual/configuration.html 一.log.xml文件的大致结构 <?xml ver ...

  4. CPU对指令长度的判断

    译码一般包括:指令预取.指令预分析.解码.预取就是从cache或者内存取一系列的字节(大小可以保证至少包含一条指令),并设置一个待分析的位置,预分析从此位置逐字节分析,如果是前缀就设置分析状态(因为前 ...

  5. 1.selenium实战之从txt文档读取配置信息并执行登录

    前置条件: 1.本机已搭建ECShop3.0网站 2.在脚本目录创建了user.txt文本如下: 目的:实现从txt中读取配置文件信息,本实战中,包含url地址.用户名.密码,然后进行ESChop的登 ...

  6. MySQL数据库优化的方式

    1.选取最适用的字段属性 MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度设得尽 ...

  7. [转]自然语言处理中的Attention Model：是什么及为什么

    自然语言处理中的Attention Model:是什么及为什么 https://blog.csdn.net/malefactor/article/details/50550211 /* 版权声明:可以 ...

  8. stack-protector-strong

    Improve protection against stack buffer overflows Much like its predecessor, stack-protector, stack- ...

  9. PHP设计模式之工厂模式（转）

    概念 工厂模式是我们最常用的实例化对象模式,是用工厂方法代替new操作的一种模式. 使用工厂模式的好处是,如果你想要更改所实例化的类名等,则只需更改该工厂方法内容即可,不需逐一寻找代码中具体实例化的地 ...

  10. doc转html

    Doc2Html  li标签没闭合 在线Word转HTML  style样式