我有一個看似基本的問題，我無法在我想要實作的目標中找到任何資源。我是 JavaScript 新手，在 CSS 方面相當平庸。
我想要完成的是這個。可以在電視螢屏上顯示的頁面，顯示體育結果串列，向右溢位。我希望頁面自動向右滾動該 div（其動態長度取決于內容的數量），以便它可以查看所有部門的所有分數并自動向右滾動內容。當它到達結尾時，暫停，然后重繪 （使用 Ajax）快速回到開頭。
我敢肯定，如果我可以指出正確使用功能的方向，我可以將各個部分連接在一起。
這是我試圖在頁面加載時運行的示例，我想在 10 秒內平滑滾動到末尾，我只是不知道如何識別/設定 div 的“結束” .
$('#ScrollMe').animate({
scrollX: ??? //To div end;
}, 10000);
我想如果我能解決這部分，我就能解決剩下的。
任何指標？Javascript，CSS....對任何東西都開放！
uj5u.com熱心網友回復：
您可以使用該.scrollWidth屬性來確定滾動多遠，減去可見寬度將給出更準確的終點，例如：
（樣式和影片時間設定為2s，只是為了演示發生了什么）
$("#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>uj5u.com熱心網友回復：
您只需要將溢位：滾動 css 屬性應用到要“溢位”頁面寬度的 div。所以它會在div下面添加一個bar，比如每個瀏覽器的默認滾動條。
parentDivWithContentToOverflow{
Overflow: scroll;
}
uj5u.com熱心網友回復：
這是您需要的一個很好的例子。
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
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/457363.html
標籤：javascript html jQuery css
上一篇：按其值禁用選擇中的選項