首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    背景:昨天一个同事有种需求,有一个展示数据区域的div,带滚动条,当滚动条滚动时,需要向后台发请求,计算数据,再拿到前台展示。        ...分析:由于数据量级别较大,所以当滚动条滚动时,如果时时向后台发请求,对服务器和浏览器都造成巨大的压力。想到的解决方案是,当滚动条停止时,再去发请求计算数据。...那么问题来了,如何判断滚动条是否停止了呢?        解决:搜索了一下,js本身是无法判断滚动条是在滚动状态还是停止状态,只有通过其它方式了。...后来想到的思路是当滚动条滚动的时候,发起一个定期执行的方法,并记录一次当前滚动条到顶部的距离,这个方法中判断此时滚动条到顶部的距离是否和上次记录的相等,如果相等,那么说明停止滚动了,不相等,还在滚动。...setInterval("test()", 1000); topValue = document.documentElement.scrollTop; } function test() { // 判断此刻到顶部的距离是否和

    21.2K00

    Vuejs在线客服系统实现滚动到底部

    丝滑的消息滚动体验 首先说说这个scrollBottom方法,它可是让消息列表自动滚动到底部的关键。我用$nextTick确保DOM更新完成后再操作,避免出现滚动位置不对的尴尬情况。...那个999999的大数值虽然看起来有点暴力美学,但确实能保证无论消息多长都能滚到底部,简单粗暴但有效!...//滚动到底部 scrollBottom:function(){ let _this=this; this....性能优化 消息列表用了虚拟滚动技术,即使聊天记录很长也不会卡顿。还有防抖节流处理,避免频繁操作导致的性能问题。 开发过程中最让我自豪的不是用了多高大上的技术,而是这些技术最终都服务于更好的用户体验。...每次看到用户能顺畅地使用这个客服系统聊天,就觉得那些调试到深夜的付出都值得了!

    19010

    jquery无缝隙连续滚动代码

    通常我们在做网页布局的时候,客户为要求在某个地方实现图片滚动或文字滚动的展示,这就是所谓的跑马灯效果,在以前蓝叶用html标签marquee来做跑马灯效果,marquee不是很完美,如果一个层的宽度或高度过长...,那么中间会用空隙显得很不美观;现在蓝叶用jquery无缝隙连续滚动代码来实现跑马灯效果,这段jquery无缝隙连续滚动代码可以自由设置,向左、向右、向上、向下的滚动效果,如果你需要就把以下代码复制到你需要的地方...,稍微进行修改即可使用了,这是一段jquery代码,需要jquery库的支持才行。...//以下代码复制到JS文件中调用 $.fn.imgscroll = function(o){ var defaults = { speed: 40, amount..." 向左或向上滚动 }); });

    8.2K30
    领券