我有一個固定大小的div,逐漸添加越來越多的內容,獲得一個水平滾動條。我想要的是能夠隨時強制滾動條到我想要的位置,這樣我就可以保持最新添加的內容始終可見,並將舊內容向左移動。但是,如果不使用jQuery--這對於一個功能來說似乎很愚蠢 - 我似乎無法找到一種方法來做到這一點。如何控制div的水平滾動?
0
A
回答
0
你可以使用家長控制的方向和正確的設置到左
<div class="container">
<div class="scroller">
</div>
</div>
div.container{
width:400px;
height:300px;
overflow-x:scroll;
direction:rtl;
}
div.scroller{
width:1000px;
height:300px;
}
確保你包裹在你的滾動內容,並設置方向爲LTR應該做您的需要。僅在Mac上進行測試,但rtl是您需要的。如果你的容器是動態的,你可能需要像scrollIntoView()這樣的js。它適用於這個靜態示例。
0
嘗試將div的scrollLeft
設置爲scrollWidth
。
例如
document.getElementById("btnAdd").onclick = function() {
var divContent = document.getElementById("divContent");
divContent.innerHTML += "<span>some stuff </span>";
divContent.scrollLeft = divContent.scrollWidth;
};
#divContent {
overflow-x: auto;
overflow-y: hidden;
height: 50px;
width: 300px;
white-space: nowrap;
}
<div id="divContent"></div>
<button id="btnAdd">add</button>
0
您可以使用scrollIntoView()
,它會滾動的特定項目進入視野。
CSS
.cont{
width: 200px;
height: 100px;
border: 1px solid black;
overflow: auto;
overflow-y: hidden;
white-space: nowrap;
}
.element{
width: 50px;
margin: 10px;
font-size: 40px;
display: inline-block;
}
HTML
<div class="cont">
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">4</div>
<div class="element">5</div>
<div class="element">6</div>
</div>
的JavaScript
function scrollTo(item) {
document.getElementsByClassName('element')[item].scrollIntoView();
};
scrollTo(5);
相關問題
- 1. div的水平滾動條
- 2. Drupal/jquery水平滾動div
- 3. CSS水平DIV滾動
- 4. Div只有水平滾動
- 5. Div水平滾動問題
- 6. 滾動條水平DIV
- 7. 使用waypoints.js控制水平滾動
- 8. WPF:如何滾動ListView控件水平?
- 9. 在滾動div內水平對齊DIV
- 10. 如何製作水平滾動圖庫
- 11. 如何控制水平列表視圖中的滾動?
- 12. 滾動相對於父div來孩子的div水平滾動
- 13. 垂直滾動div內的水平滾動div
- 14. 垂直滾動時水平移動DIV
- 15. div水平滾動不工作自動
- 16. 滾動水平動態div項目
- 17. 如何水平滾動scrollview
- 18. 如何滾動collectionview水平?
- 19. 使用按鈕的水平滾動div
- 20. 嵌套的DIV和水平滾動條
- 21. div的水平滾動不起作用
- 22. 水平滾動的div與Angular4
- 23. HTML並啓用div的水平滾動,但隱藏水平滾動條
- 24. 水平滾動
- 25. 水平滾動
- 26. 水平滾動
- 27. 水平滾動?
- 28. 用控件水平滾動div的圖像
- 29. 用水平滾動條做一行div
- 30. 水平視差滾動到中心DIV
你有什麼試過?你有沒有嘗試使用'scrollIntoView()' –