滚动字幕scrollTop无效问题

最新推荐文章于 2023-06-15 09:53:40 发布

山鬼taro

最新推荐文章于 2023-06-15 09:53:40 发布

阅读量428

点赞数

分类专栏：大数据可视化

本文链接：https://blog.csdn.net/sinat_36359516/article/details/113624161

版权

大数据可视化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、现象

应需求，需要将一段字幕实时滚动，效果如下
在这里插入图片描述
代码如下：

gundongLeftBot () {
    var guangbo = ''
    var guangboLen = 0
    var self = this
    setTimeout(() => {
        guangbo = self.$refs.record
        guangboLen = self.data_list.playRecord.length * 54 - 272 - 16
        clearInterval(this.timer1)
        this.timer1 = setInterval(() => {
            //广播记录滚动
            if (self.data_list.playRecord.length > 5) {
                if (guangbo.scrollTop >= guangboLen) {
                	guangbo.scrollTop = 0;
                } else {
                	guangbo.scrollTop ++;//这里打印出来，始终为0
                }
            }
        }, 150)
    },1000)
},

这段代码，在我自己电脑上，无论是谷歌、IE、edge字幕都是滚动的，
在实际环境中，IE、edge也是滚动的，但是谷歌里就不滚动了，打印出来scrollTop++无效，不管怎么加始终为0，甚是纳闷，咱也不知道是不是浏览器版本啥的问题

把各种帖子翻了个底朝天，什么加this.nextTick(()=>{})，什么scrollHeight，对我这个现象都无效，于是，就自己来测试到底是不是浏览器兼容问题导致的

二、测试demo

这里我找到了w3c school里的demo，在这个基础上做了调整
jQuery CSS 操作 - scrollTop() 方法，代码如下：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  //$(".btn1").click(function(){
   // $("div").scrollTop(100);
  //});
 // $(".btn2").click(function(){
   // alert($("div").scrollTop()+" px");
  //});
  var top=0
  setInterval(()=>{
  	$("div").scrollTop(top++);//设个定时器看看会不会自动往下滚
  },150)
});
</script>
</head>
<body>
<div style="border:1px solid black;width:200px;height:200px;overflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
<button class="btn1">把 scroll top offset 设置为 100px</button>
<br />
<button class="btn2">获得 scroll top offset</button>
</body>
</html>

竟然可以，这就奇怪了，是我赋值方式不对？

三、修正

把一中的guangbo.scrollTop ++，改成
$(’#guangbo’).scrollTop(top++) ，也不知道为啥，这种赋值在各个浏览器中才能生效，代码如下：

gundongLeftBot () {
    var guangbo = ''
    var guangboLen = 0
    var top=0
    var self = this
    setTimeout(() => {
        guangbo = self.$refs.record
        // guangboLen = self.data_list.playRecord.length * 54 - 272 - 16
        guangboLen = self.data_list.playRecord.length * 32.2 -220
        clearInterval(this.timer1)
        this.timer1 = setInterval(() => {
            //广播记录滚动
            if (self.data_list.playRecord.length > 5) {
                if (guangbo.scrollTop >= guangboLen) {
                    // guangbo.scrollTop = 0;//这个赋值方式，有的浏览器不生效，换成下面这个
                    top=0;
                    $('#guangbo').scrollTop(top)//这个赋值方式带来新的问题，与鼠标操作滚动，不兼容
                } else {
                    // guangbo.scrollTop ++;
                    $('#guangbo').scrollTop(top++)
                }
            }
        }, 150)
    },1000)
},

四、总结

如果朋友们用法1在浏览器内都能滚动，那就推荐法1，毕竟这个方法在自动滚动时，操作鼠标滚轮，它会自动从你滚动到的地方继续往下滚；

如果法1不能兼容，跟我一样的话，那就使用法3，法3浏览器能兼容各个浏览器，但是智能自动滚动，操作鼠标滚轮无效，笑哭。

我后续再瞅瞅，怎么把这两兼容一下

山鬼taro

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
滚动字幕scrollTop无效问题

一、现象应需求，需要将一段字幕实时滚动，效果如下代码如下：gundongLeftBot () { var guangbo = '' var guangboLen = 0 var self = this setTimeout(() => { guangbo = self.$refs.record guangboLen = self.data_list.playRecord.length * 54 - 272 - 16
复制链接

扫一扫