表格无缝向上滚动demo.scrollTop始终为0问题解决

最新推荐文章于 2025-05-29 11:52:53 发布

Mysmilebaby

最新推荐文章于 2025-05-29 11:52:53 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/mayusunshine/article/details/79551888

web前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种解决 scrollTop 始终为0的情况，主要原因是浏览器缩放比设置不当。通过将缩放比调整为100%，可以确保页面元素正确响应滚动事件。文章还提供了一个使用 JavaScript 实现无缝滚动的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导致scrollTop始终为0的原因有可能是浏览器设置了缩放比；缩放比小于100%导致。把浏览器缩放比改为100%，就可以正常滚动了！

代码如下：

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<title>表格无缝向上滚动demo.scrollTop始终为0问题解决</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border: 0px;
}

body {
font-size: 12px
}

#demo {
overflow: hidden;
height: 80px;
width: 280px;
margin: 90px auto;
position: relative;
}

#demo1 {
height: auto;
text-align: left;
}

#demo2 {
height: auto;
text-align: left;
}

#demo1 li {
list-style-type: none;
height: 22px;
text-align: left;
text-indent: 15px;
}

#demo2 li {
list-style-type: none;
height: 22px;
text-align: left;
text-indent: 15px;
}
</style>
<script type="text/javascript">
var speed = 40
window.onload = function() {
var demo = document.getElementById("demo");
var demo2 = document.getElementById("demo2");
var demo1 = document.getElementById("demo1");
demo2.innerHTML = demo1.innerHTML

function Marquee() {
if(demo.scrollTop >= demo1.offsetHeight) {
demo.scrollTop = 0;
} else {
demo.scrollTop = demo.scrollTop + 1;
}
}
var MyMar = setInterval(Marquee, speed)
demo.onmouseover = function() {
clearInterval(MyMar)
}
demo.onmouseout = function() {
MyMar = setInterval(Marquee, speed)
}
}
</script>
</head>

<body>
<div id="demo">
<table id="demo1">
<tr><td>1111</td></tr>
<tr><td>2222</td></tr>
<tr><td>3333</td></tr>
<tr><td>4444</td></tr>
<tr><td>5555</td></tr>
<tr><td>6666</td></tr>
<tr><td>7777</td></tr>
<tr><td>8888</td></tr>
<tr><td>99999</td></tr>
</table>
<table id="demo2"></table>
</div>
</body>

</html>