页面加载时自动动画/水平滚动Div

Question

我有一个看似基本的问题，在我试图解决的问题中找不到任何资源。我是JavaScript新手，在CSS方面相当平庸。

我正在努力做到这一点。一个可以显示在电视屏幕上的页面，显示向右溢出的体育成绩列表。我希望页面自动向右滚动该div(其动态长度取决于内容量(，这样它就可以看到所有分区的所有分数，并自动向右滚动内容。当它到达结尾时，暂停，然后刷新(使用Ajax(，捕捉回开头。

我确信，如果我能指向正确的函数使用方向，我就能将各个部分连接在一起。

这是一个我试图在页面加载时运行的东西的例子，我想在10秒内平滑滚动到最后，我只是不知道如何识别/设置"；结束"；部门

$('#ScrollMe').animate({
scrollX: ??? //To div end;
}, 10000);

我想如果我能解决这一部分，我就能解决剩下的

有指针吗？Javascript、CSS。。。。对任何事情都开放！

Answer 1

您可以使用.scrollWidth属性来确定滚动多远，减去可见宽度将得到更准确的终点，例如：

(样式和动画时间设置为2秒，只是为了演示正在发生的事情(

$("#scrollMe").animate({
scrollLeft: ($("#scrollMe")[0].scrollWidth - $("#scrollMe").width()) + "px"
}, 2000);

#scrollMe { width: 100%; border:1px solid blue; overflow:auto; }
#inner { width: 6000px; border:5px solid red; height:20px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=scrollMe>
<div id=inner>
</div>
</div>

Answer 2

您只需要将overflow：scroll css属性应用到您想要的div中"溢出"；页面宽度。因此，它将在div下面添加一个栏，例如每个浏览器的默认滚动栏。

parentDivWithContentToOverflow{
Overflow: scroll;
}

Answer 3

这是您所需要的一个很好的例子。

https://css-tricks.com/snippets/jquery/smooth-scrolling/

但是您需要指定div来实现这一点。

如果您的要求只是滚动到页面的末尾(右边(，那么您可以使用您的示例。但您需要指定向右滚动的像素位置。为此，您可能需要以下内容。

function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}

上面的代码片段是从这个答案中窃取的😁https://stackoverflow.com/a/59520378/4972683