web-dev-qa-db-ja.com

ブラウザまたは要素のスクロールバーを無効にしながら、ホイールまたは矢印キーでのスクロールを許可するにはどうすればよいですか？

div要素とbody全体からスクロールバーを非表示にしますが、マウスホイールまたは矢印キーでユーザーをスクロールさせます。未加工のJavaScriptまたはjQueryでこれを実現するにはどうすればよいですか？何か案は？

javascriptjquerycssbrowserscrollbar
52
Shizoman

前の回答と同様に、overflow:hiddenを使用してbody/divのスクロールバーを無効にします。

次に、mousewheelイベントを、divのscrollTopを変更してスクロールをエミュレートする関数にバインドします。

矢印キーの場合、keydownイベントをバインドして矢印キーを認識し、必要に応じてdivのscrollTopとscrollLeftを変更してスクロールをエミュレートします。 （注：IEは矢印キーのkeydownを認識しないため、keypressの代わりにkeypressを使用します。）
編集：divでkeydownを認識するためにFF/Chromeを取得できませんでしたが、IE8で動作します。これに必要なものに応じて、keydownにdocumentリスナーを設定して、divをスクロールできます。 （例として、keyCodeリファレンスを確認してください。）

たとえば、マウスホイールでスクロールする（jQueryとマウスホイールプラグインを使用）：

<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リファレンス
マウスホイールプラグイン
keydown、keypress @ quirksmode

更新日2012/12/19：

マウスホイールプラグインの更新された場所は次のとおりです。 https://github.com/brandonaaron/jquery-mousewheel

48
Grace

純粋なCSSソリューションはどうですか？私はこれをテストしましたが、うまく機能します。ただし、ソリューション3はハックではなく、JSを搭載したすべてのブラウザーでサポートされており、非常にシンプルなので、ソリューション3をお勧めします。

ソリューション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による 、廃止されました。以前は機能していましたが、オーバーフローが隠され、使用されている場合はスクロールが無効になりました。

.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）

完全なスクロールバー（インストールされていればjQueryを利用できますが）jQueryを必要とせず、 デモが利用可能ここ 。コンポーネントは、次の例のようにcssでスタイル設定できます。

.ps-scrollbar-y-rail {
  display: none !important;
}

Perfect Scrollbarの実装を含む完全な例を次に示します。

<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>
11
Peter Gordon

この質問の複製に対して提供されたSamGoodyの回答が非常に好きです。いくつかの特定の入力デバイスに対して手動で再実装を試みる代わりに、ネイティブのスクロール効果をそのまま残します。

より良い解決策は、ターゲットdivをoverflow：scrollに設定し、overflow：hiddenである8pxより狭い2番目の要素でラップすることです。

肉付きの良い例については 元のコメント をご覧ください。 JavaScriptを使用して、 スクロールバーの実際のサイズを決定する は、彼の例のように常に8ピクセル幅であると仮定するのではなく、.

7
natevw

これを作成するためにjqueryまたはjsを使用する必要はありません。シンプルなWebキットでより高性能です。

以下のコードをcssファイルに追加するだけです。

::-webkit-scrollbar { 
    display: none; 
}

注意 ！これにより、すべてのスクロールバーが無効になるため、スクロールバーを非表示にする場合は、必ず特定のクラスまたはIDに配置してください。

7
Baldráni

これを機能させるために、次のCSSを使用しました。

_html { overflow-y: hidden; }
_

しかし、$(this).scrollTop()の使用に問題があったため、＃idにバインドしましたが、ウィンドウのscrollTopを調整しました。また、スムーズスクロールマウスは1または-1のデルタを大量に発生させるため、20倍にしました。

_$("#example").bind("mousewheel", function (ev, delta) {
    var scrollTop = $(window).scrollTop();
    $(window).scrollTop(scrollTop - Math.round(delta * 20));
});
_
4
Kevin Hakanson

Baldráni上記のように

::-webkit-scrollbar { display: none; }

またはあなたはできる

::-webkit-scrollbar{ width: 0px; }


（グーグル検索でこれにつまずいた他の人に投稿！）

0
DardanM