如何禁用瀏覽器或元素滾動條，但仍允許使用滾輪或方向鍵滾動？
[英]How can I disable a browser or element scrollbar, but still allow scrolling with wheel or arrow keys?
問題描述
我想隱藏div元素和整個body所有滾動條，但仍然允許用戶使用鼠標滾輪或箭頭鍵滾動。 原始JavaScript或jQuery如何實現？ 有任何想法嗎？
7 個解決方案
解決方案1
48 2009-08-25 08:32:32
像前面的答案一樣，您可以使用overflow:hidden禁用body / div上的滾動條。
然后，將mousewheel事件綁定到一個函數，該函數將更改div的scrollTop以模擬滾動。
對於箭頭鍵，您將綁定keydown事件以識別箭頭鍵，然后適當地更改div的scrollTop和scrollLeft以模擬滾動。 （注意：您使用keydown代替keypress ，因為IE不能識別keypress的箭頭鍵。）
編輯：我無法讓FF / Chrome識別div上的keydown ，但是它可以在IE8中使用。 根據所需的功能，您可以在document上設置keydown偵聽器以滾動div。 （請參閱keyCode參考作為示例。）
例如，使用鼠標滾輪滾動（使用jQuery和mousewheel插件）：
<div id="example" style="width:300px;height:200px;overflow:hidden">
insert enough text to overflow div here
</div>
<script>
$("#example").bind("mousewheel",function(ev, delta) {
var scrollTop = $(this).scrollTop();
$(this).scrollTop(scrollTop-Math.round(delta));
});
</script>
（這是一個快速的模型，您必須調整數字，因為對我來說，這滾動有點慢。）
keyCode參考
鼠標滾輪插件
按鍵，按鍵@ quirksmode
2012年12月19日更新：
mousewheel插件的更新位置在： https://github.com/brandonaaron/jquery-mousewheel
解決方案2
11 2012-11-21 18:46:48
純CSS解決方案呢？ 我已經對此進行了測試，並且效果很好。 但是，我建議解決方案3並非易受攻擊，它支持所有使用JS的瀏覽器，並且非常簡單。
解決方案1 （跨瀏覽器，但更具入侵性）
#div { position: fixed; right: -20px; left: 20px; background-color: black; color: white; height: 5em; overflow-y: scroll; overflow-x: hidden; }
<html> <body> <div id="div"> Scrolling div with hidden scrollbars!<br/> On overflow, this div will scroll with the mousewheel but scrollbars won't be visible.<br/> Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br> </div> </body> </html>
解決方案2 （僅限IE和Chrome）
只需將nobars類添加到要在其上隱藏滾動條的任何元素。
Firefox overflow: -moz-scrollbars-none 根據MDN ， overflow: -moz-scrollbars-none已過時。 它曾經可以工作，但是現在可以隱藏溢出並禁用滾動（如果使用）。
.nobars {
/* Firefox: https://developer.mozilla.org/en/docs/Web/CSS/overflow */
/* overflow: -moz-scrollbars-none; (no longer works) */
/* IE: https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx */
-ms-overflow-style: none;
}
.nobars::-webkit-scrollbar {
/* Chrome: https://css-tricks.com/custom-scrollbars-in-webkit/ */
display: none;
}
解決方案3 （跨瀏覽器javascript）
Perfect Scrollbar不需要jQuery（盡管可以安裝jQuery，但可以使用jQuery），並在此處提供了一個演示 。 可以使用css樣式化組件，如以下示例所示：
.ps-scrollbar-y-rail {
display: none !important;
}
這是一個完整的示例，其中包括Perfect滾動條的實現：
<link rel="stylesheet" href="css/perfect-scrollbar.min.css">
<style>
#container {
position: relative; /* can be absolute or fixed if required */
height: 200px; /* any value will do */
overflow: scroll;
}
.ps-scrollbar-y-rail {
display: none !important;
}
</style>
<script src='js/perfect-scrollbar.min.js'></script>
<div id="container">
Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
</div>
<script>
// on dom ready...
var container = document.getElementById("container");
Ps.initialize(container);
//Ps.update(container);
//Ps.destroy(container);
</script>
解決方案3
7 2012-05-22 15:42:30
我更喜歡SamGoody對這個問題的重復答案。 它使原始滾動效果保持完整，而不是嘗試為一些特定的輸入設備手動重新實現：
更好的解決方案是將目標div設置為overflow：scroll，並將其包裝在第二個元素內，該元素的寬度要窄8px，即誰是誰：
請參閱原始注釋以獲取充實的示例。 您可能想使用JavaScript 確定滾動條的實際大小，而不是像他的示例那樣假定滾動條的寬度始終為8px。
解決方案4
7 2015-04-28 17:11:33
您不必使用jquery或js來做到這一點。 通過簡單的Webkit，它的性能更高。
只需將以下代碼添加到您的css文件。
::-webkit-scrollbar {
display: none;
}
小心！ 這將禁用所有滾動條，因此如果您只想隱藏一個滾動條，請確保將其放在特定的類或ID中。
解決方案5
4 2011-03-05 15:38:33
為了使它為我工作，我使用了以下CSS：
html { overflow-y: hidden; }
但是我在使用$(this).scrollTop()遇到了問題，所以我綁定到了#id，但是調整了window的scrollTop。 另外，我的平滑滾動鼠標會觸發1個或-1個增量，因此我將其乘以20。
$("#example").bind("mousewheel", function (ev, delta) {
var scrollTop = $(window).scrollTop();
$(window).scrollTop(scrollTop - Math.round(delta * 20));
});
解決方案6
0 2015-05-27 00:10:11
就像鮑德蘭尼在上面說的
::-webkit-scrollbar { display: none; }
或者你可以做
::-webkit-scrollbar{ width: 0px; }
（發布給在Google搜索中偶然發現此問題的其他人！）
解決方案7
-4 2009-08-25 07:32:52
好吧，在我看來，這也許不是最直觀的方法，但是我可以想象您能夠使它成為一個體面的體驗，請嘗試一下。
overflow:hidden;
確保父對象具有height和width ，並顯示為block
使用箭頭鍵阻止頁面滾動，但仍允許光標在文本字段中移動？
[英]Prevent page-scrolling with arrow keys, but still allow cursor to move within text field?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.