使用JavaScript禁用水平滾動條

有誰知道是否有方法使用JavaScript禁用水平滾動條？我不想使用overflow-x: hidden;。使用JavaScript禁用水平滾動條

2011-09-21 Jay

真的，最簡單的方法是應用溢出-X的風格，當你想隱藏滾動條，然後當你想讓它顯示刪除它。 – n8wrl

你能解釋一下你不想使用'overflow-x：hidden'的原因嗎？ – Sparky

可能是因爲iOS在很多情況下傾向於忽略它。 –

如果沒有使用完美可行的overflow-x CSS屬性，您可以調整內容的大小以使其不需要滾動條，即可通過JavaScript或通過HTML/CSS設計。

你也可以這樣做：

window.onscroll = function() { 
window.scrollTo(0,0); 
}

...這將檢測到任何滾動，並自動滾動回到頂部/左。值得一提的是，做這樣的事情肯定會讓用戶感到沮喪。

您最好通過創建一個根本不存在不需要的UI元素的環境（通過CSS，通過設計）來實現。上面提到的方法顯示了不必要的UI元素（滾動條），然後導致它們不能以用戶期望的方式工作（滾動頁面）。您已經與用戶「違約」 - 他們如何相信當用戶做出熟悉的操作時，您的網站或應用程序的其餘部分會做預期的事情？

來源

2011-09-21 16:18:10

+1對於沮喪的用戶的說明，請指望我在那個組:) :) – Sander

我通常設置overflow-x：hidden。但通常這並不妨礙瀏覽器使用OSX觸摸板水平滾動目標。 –

，以防止在jQuery的向下滾動元素的一種方式：

$(element).scroll(function() { 
    this.scrollTop = 0; 
    this.scrollLeft = 0; 
});

那麼，這實際上並沒有阻止滾動，但它「羊皮捲回」到一個元素的左上角，類似克里斯的解決方案是爲窗口而不是單個元素創建的。刪除scrollTop或scrollLeft行以滿足您的需求。

來源

2011-09-21 16:24:38 Lekensteyn

他們說左右滾動..不上下.. – 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; 
}

來源

2011-09-21 16:28:31 pimvdb

使用JavaScript禁用水平滾動條

回答

相關問題