可以在Javascript中控制CSS溢出滾動條嗎？

我有一個div與類overflow: auto;有沒有辦法控制這個滾動條出現時？可以在Javascript中控制CSS溢出滾動條嗎？

我有一個ajax照片庫（無頁面刷新），其中一些標題文本在div中，但內容長度各不相同。如果您在此div中向下滾動，然後前進到下一張幻燈片，則滾動條不會回到頂部。所以，我想知道是否有辦法控制這個滾動條。謝謝。

2011-05-16 Stephen

使用jQuery，您可以設置滾動區域的頂部，像這樣：

$('#contents').scrollTop(0);

Here's a demo showing this in action->

注意，這也可以在沒有jQuery的：

document.getElementById('contents').scrollTop = 0;

And a demo of that->

對於這兩個演示，按重置按鈕將滾動條設置回頂部。

來源

2011-05-16 20:10:12 Ender

感謝您的建議。讓我來調查一下。 – Stephen 2011-05-16 20:27:03

我正在授予Ender的答案。 – Stephen 2011-05-17 14:59:50

更新的測試後，使用elm.scrollTop = 0：

<div style="overflow:auto;height:100px;width:100px"> 
    <p>test</p> 
    <p>test</p> 
    <p>test</p> 
    <a href="javascript:" onclick="this.parentNode.scrollTop = 0">go up</a> 
</div>

來源

2011-05-16 20:05:39 Mic

這不是瀏覽器的滾動條。這是出現在div上的滾動條，因爲它有一個溢出：自動CSS聲明。內容出現在div內。 – Stephen 2011-05-16 20:08:45

我從來沒有使用它，但你嘗試'div.scrollTo（x，y）'？ – Mic 2011-05-16 20:10:35

我做了一個測試，它不起作用。對於那個很抱歉。 – Mic 2011-05-16 20:16:59

可以更改<div>元素的屬性scrollTop的價值。

見element.scrollTop在MDC文檔

見element.scrollTop MSDN上

雖然scrollTop不是任何標準的一部分，它是由所有主流瀏覽器的支持。

來源

2011-05-16 20:06:59

有趣。謝謝。讓我來調查一下。 – Stephen 2011-05-16 20:23:03

要移動豎線回溢出的元素myControl在上面，你必須做

$("#myControl").scrollTop(0);

，或者在單槓的情況下，將其移動到開始（左）

$("#myControl").scrollLeft(0);

如果你想隱藏滾動條，你必須這樣做CSS

#myControl { 
    overflow: hidden; 
}

你是假設下一張幻燈片位於頂部。如果你有絕對的positionated幻燈片，您可以更好地做到以下幾點，以確保您滾動到正確的nextSlide位置：

var nextSlidePos = $("#slide" + nextSlide).position(); 
$("#myControl").scrollTop(nextSlidePos.top).scrollLeft(nextSlidePos.left);

來源

2011-05-16 20:07:50

可以在Javascript中控制CSS溢出滾動條嗎？

回答

相關問題