精华内容
下载资源
问答
  • JS判断滚动条是否停止滚动

    万次阅读 2013-03-19 21:57:45
    背景:昨天一个同事有种需求,有一个展示数据区域的div,带滚动条,当滚动滚动时,需要向后台发请求,计算数据,再拿到前台展示。  分析:由于数据量级别较大,所以当... 解决:搜索了一下,js本身是无法判断滚动

           背景:昨天一个同事有种需求,有一个展示数据区域的div,带滚动条,当滚动条滚动时,需要向后台发请求,计算数据,再拿到前台展示。

           分析:由于数据量级别较大,所以当滚动条滚动时,如果时时向后台发请求,对服务器和浏览器都造成巨大的压力。想到的解决方案是,当滚动条停止时,再去发请求计算数据。那么问题来了,如何判断滚动条是否停止了呢?

           解决:搜索了一下,js本身是无法判断滚动条是在滚动状态还是停止状态,只有通过其它方式了。后来想到的思路是当滚动条滚动的时候,发起一个定期执行的方法,并记录一次当前滚动条到顶部的距离,这个方法中判断此时滚动条到顶部的距离是否和上次记录的相等,如果相等,那么说明停止滚动了,不相等,还在滚动。

           代码:    

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> New Document </title>
      <script type="text/javascript">
      <!--
    	// 让浏览器出现滚动条
    	for(var i = 0; i < 100; i++) {
    		document.write("<br/>");
    	}
    
    	var topValue = 0,// 上次滚动条到顶部的距离
    		interval = null;// 定时器
    	document.onscroll = function() {
    		if(interval == null)// 未发起时,启动定时器,1秒1执行
    			interval = setInterval("test()", 1000);
    		topValue = document.documentElement.scrollTop;
    	}
    
    	function test() {
    		// 判断此刻到顶部的距离是否和1秒前的距离相等
    		if(document.documentElement.scrollTop == topValue) {
    			alert("scroll bar is stopping!");
    			clearInterval(interval);
    			interval = null;
    		}
    	}
      //-->
      </script>
     </head>
     <body>
     </body>
    </html>
    
           可以设置定时执行的时间,时间越短,响应的越及时,浏览器压力越大;时间越长,响应的越慢,浏览器压力越小。

           你还有更好的方式吗?求教

           本文来自:高爽|Coder,原文地址:http://blog.csdn.net/ghsau/article/details/8693824       

    展开全文
  • // 滚动的值 var start = 0; // 对比时间的值 var end = 0; var timer = null; document.onscroll = function(){ clearTimeout(timer) // 每次滚动前 清除一次 timer = setTimeout(Data, 2000); star...
    // 滚动的值
    var start = 0;    
    // 对比时间的值 
    var end = 0;     
    var timer = null;
    document.onscroll = function(){
            clearTimeout(timer) // 每次滚动前 清除一次
            timer = setTimeout(Data, 2000);
            start = document.documentElement.scrollTop || document.body.scrollTop;
    }
    function Data(){
            end = document.documentElement.scrollTop || document.body.scrollTop;
            if(end == start){
                console.log('停止滚动了');
                $('.act_go_top').fadeOut(300);
            }
    }
    展开全文
  • js 监听滚动条停止滚动

    千次阅读 2019-07-04 17:37:46
    let t1 = 0; let t2 = 0; let timer = null; // 定时器 // scroll监听 document.onscroll = function() { clearTimeout(timer);... timer = setTimeout(isScrollEnd, 1000)... console.log('滚动结束了') } }  
    let t1 = 0;
    let t2 = 0;
    let timer = null; // 定时器
    
    // scroll监听
    document.onscroll = function() {
      clearTimeout(timer);
      timer = setTimeout(isScrollEnd, 1000);
      t1 = document.documentElement.scrollTop || document.body.scrollTop;
    }
    
    function isScrollEnd() {
      t2 = document.documentElement.scrollTop || document.body.scrollTop;
      if(t2 == t1){
        console.log('滚动结束了')
      }
    }

     

    展开全文
  • js判断滚动条是否停止滚动

    千次阅读 2017-09-21 11:14:03
    滚动距离不变就没滚动 var topValue = 0,// 上次滚动条到顶部的距离 interval = null;// 定时器 document.onscroll = function() { if(interval == null)// 未发起时,启动定时器,1秒1执行 ...

    滚动距离不变就没滚动

    var topValue = 0,// 上次滚动条到顶部的距离  
            interval = null;// 定时器  
        document.onscroll = function() {  
            if(interval == null)// 未发起时,启动定时器,1秒1执行  
                interval = setInterval("test()", 1000);  
            topValue = document.documentElement.scrollTop;  
        }  
      
        function test() {  
            // 判断此刻到顶部的距离是否和1秒前的距离相等  
            if(document.documentElement.scrollTop == topValue) {  
                alert("scroll bar is stopping!");  
                clearInterval(interval);  
                interval = null;  
            }  
        } 
    展开全文
  • 图片滚动javascript特效,可自动播放停止滚动插件
  • js 自动滚动,鼠标移动停止滚动

    千次阅读 2017-05-09 11:26:22
    var timer; function pageScroller () { timer = setTimeout( ...//清除时钟,清除滚动动画 ...设置定时器,自动调用pageScroller()方法....这样就实现了页面3秒后自动滚动,然后鼠标移动停止动画
  • 代码实现 滚动信息 1好消息!好消息!本店所有商品全部白送1 2好消息!好消息!本店所有商品全部白送2 3好消息!好消息!本店所有商品全部白送3 4好消息!好消息!本店所有商品全部白送4 5好消息!好消息!本店所有...
  • 逐行向上滚动js代码,鼠标移上停止滚动,不满一屏的时候不滚动
  • JS判断鼠标滚轮停止滚动

    千次阅读 2017-08-01 21:21:04
    学习过程中碰到需要在滚轮滚动以及停止滚动时触发不同的事件,然后发现JS里监听的事件只有鼠标滚动事件;然后想到的思路是设置一个计时器,200毫秒后执行滚轮停止事件,每次滚动重置计时器的时间,但是这样做的话会...
  • 实现的js不难,但总是出现滚动停止的问题,每次碰到还不一样,特此记录。 css文件 — csee.css 为了下次直接用,把css也贴上。 .title-panel{ margin-top: 20px; margin-left: 20px; margin-right: 20px...
  • 需要在页面中一个小的区域循环滚动展示新闻并且鼠标悬停时停止滚动并提示,离开后,继续滚动,具体实现如下,喜欢的朋友可以参考下
  • </ul> </div> <script type="text/javascript"> var conScroll = function(){ var scrollCon = document.getElementById("scrollCon"); var li = scrollCon.getElementsByTagName("li"); ...
  • 给大家分享一个js 循环滚动展示数据的小demo,鼠标上移停止滚动,下载即可查看效果
  • var speed = 42 //设置滚动速度 m0.innerHTML = mtext.innerHTML function Marquee() { if (m0.offsetTop - maq.scrollTop ) maq.scrollTop -= mtext.offsetHeight else { maq.scrollTop++ } } ...
  • 最近遇到一个变态需求,滚动的时候将元素x隐藏掉,当滚动滚动停止的时候再把元素x显示出来。 思路 监听浏览器滚动; 事件触发的时候获取当前的scrollTop( t1 ),执行isScrollEnd函数( 建议延迟500 ); 在...
  •  http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ... 鼠标经过滚动停止效果。 #www_zzjs_net { background: #FFF; overflow:hidden; border: 1px dashed #CCC; wi
  • 主要介绍了js实现鼠标经过时图片滚动停止的方法,可实现js滚动特效中的鼠标悬停停止图片滚动的功能,非常具有实用价值,需要的朋友可以参考下
  • 最近接到了一个需求,滚动隐藏元素,停止显示,需要在页面中判断滚动开始和结束。使用纯原生的方法我们可以判断出滚动开始和结束,但是还是有些繁琐的。恰巧我的项目是vue的,便利用vue中的watch(侦听器)实现了这...
  • js文字列表滚动鼠标悬浮停止 js代码 //js代码 (function($){ $.fn.myScroll = function(options){ //默认配置 var defaults = { speed:40, //滚动速度,值越大速度越慢 rowHeight:24 //每行的高度 }; var ...
  • 这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目。 首先,要做的是一个需要滚动的区域。我前边写过一个关于图片循环滚动的示例,...
  • Javascript 实现连续可停止 滚动字幕

    千次阅读 2008-07-03 14:06:00
    前几天要实现一个滚动字幕,先用Marquee标签控制元素的滚动发现到每滚完一幕,就会出现一次空白,不能满足需求,上网找了下没有其他控件可以用,就用js实现了个可以连续滚动的字幕。滚动速度,时间间隔,滚动去高度...
  • 主要介绍了js图片滚动效果时间可随意设定当鼠标移上去时停止,需要的朋友可以参考下
  • js文字滚动特效,到头尾停止,基于jquery4.1以上
  • jq实现文字无缝滚动代码鼠标悬停停止滚动效果图 直接copy就能运行<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,345
精华内容 11,738
关键字:

js停止滚动