有誰知道是否有方法使用JavaScript禁用水平滾動條?我不想使用overflow-x: hidden;
。使用JavaScript禁用水平滾動條
回答
如果沒有使用完美可行的overflow-x
CSS屬性,您可以調整內容的大小以使其不需要滾動條,即可通過JavaScript或通過HTML/CSS設計。
你也可以這樣做:
window.onscroll = function() {
window.scrollTo(0,0);
}
...這將檢測到任何滾動,並自動滾動回到頂部/左。值得一提的是,做這樣的事情肯定會讓用戶感到沮喪。
您最好通過創建一個根本不存在不需要的UI元素的環境(通過CSS,通過設計)來實現。上面提到的方法顯示了不必要的UI元素(滾動條),然後導致它們不能以用戶期望的方式工作(滾動頁面)。您已經與用戶「違約」 - 他們如何相信當用戶做出熟悉的操作時,您的網站或應用程序的其餘部分會做預期的事情?
+1對於沮喪的用戶的說明,請指望我在那個組:) :) – Sander
我通常設置overflow-x:hidden。但通常這並不妨礙瀏覽器使用OSX觸摸板水平滾動目標。 –
,以防止在jQuery的向下滾動元素的一種方式:
$(element).scroll(function() {
this.scrollTop = 0;
this.scrollLeft = 0;
});
那麼,這實際上並沒有阻止滾動,但它「羊皮捲回」到一個元素的左上角,類似克里斯的解決方案是爲窗口而不是單個元素創建的。刪除scrollTop
或scrollLeft
行以滿足您的需求。
他們說左右滾動..不上下.. – Reuben
@Reuben然後使用'scrollLeft'而不是'scrollTop'。 – Lekensteyn
我會說刪除'this.scrollTop = 0;'這絕對是答案! – Reuben
一個骯髒的技巧將重疊滾動條:http://jsfiddle.net/dJqgf/。
var overlap = $('<div id=b>');
$("#a").wrap($('<div>'));
$("#a").parent().append(overlap);
有:
#a {
width: 100px;
height: 200px;
overflow-x: scroll;
}
#b {
position: relative;
left: 0;
bottom: 20px;
width: 100%;
height: 20px;
background-color: white;
}
- 1. C#ListView禁用水平滾動條
- 2. 禁用slickgrid水平滾動條
- 3. JavaFX:禁用TableView的水平滾動條
- 4. AJAX使用滾動條水平滾動
- 5. Netbeans禁用水平滾動
- 6. 禁用UITableView水平滾動
- 7. Javascript水平滾動條
- 8. Facebook中的水平禁用滾動條使用Firefox的畫布
- 9. 水平滾動+滾動條
- 10. CSS - 僅使用水平滾動條
- 11. 禁用水平拖動滾動
- 12. 水平滾動? javascript
- 13. 如何禁用UIScrollView的水平滾動?
- 14. 在iPad上禁用水平滾動
- 15. 在PhpStorm中禁用水平滾動
- 16. 如何禁用NSScrollView的水平滾動?
- 17. 如何禁用jquery的水平滾動?
- 18. Bootstrap側導航禁用水平滾動
- 19. 如何禁用uiwebview的水平滾動?
- 20. 禁用水平垂直滾動iOS
- 21. 禁用jscrollpane中的水平滾動
- 22. 禁用片段中的水平滾動
- 23. JavaScript中的水平新聞滾動條
- 24. 禁用列表視圖中的水平滾動條
- 25. 禁用瀏覽器垂直和水平滾動條
- 26. 如何禁用面板中的水平滾動條
- 27. 如何在FlowLayoutPanel中禁用水平滾動條?
- 28. Windows列表框中禁用的水平滾動條
- 29. 如何禁用Flex組件中的水平滾動條?
- 30. Jscrollpane:使用水平滾動條功能可以滾動200px嗎?
真的,最簡單的方法是應用溢出-X的風格,當你想隱藏滾動條,然後當你想讓它顯示刪除它。 – n8wrl
你能解釋一下你不想使用'overflow-x:hidden'的原因嗎? – Sparky
可能是因爲iOS在很多情況下傾向於忽略它。 –