CSSを使用してスクロールバーを非表示にできますか？どうしますか？

次のoverflow: hidden;ようにbodyタグに設定します。

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

上記のコードは、水平スクロールバーと垂直スクロールバーの両方を非表示にします。

垂直スクロールバーのみを非表示にする場合は、次を使用しますoverflow-y。

<style type="text/css">
    body {
        overflow-y: hidden;
    }
</style>

また、水平スクロールバーのみを非表示にしたい場合は、次を使用しますoverflow-x。

<style type="text/css">
    body {
        overflow-x: hidden;
    }
</style>

注：スクロール機能も無効になります。スクロールバーを非表示にして、スクロール機能を非表示にしたい場合は、以下の回答を参照してください。

WebKitは、標準のCSSルールで非表示にできるスクロールバーの疑似要素をサポートしています。

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

すべてのスクロールバーを非表示にしたい場合は、

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

復元について確信がありません-これはうまくいきましたが、それを行う正しい方法があるかもしれません：

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

もちろん、いつでもを使用width: 0できます。これはで簡単に復元できますwidth: autoが、私はwidth可視性の微調整を悪用するのが好きではありません。

Firefox 64はデフォルトで実験的なscrollbar-widthプロパティをサポートするようになりました（63は設定フラグの設定が必要です）。Firefox 64でスクロールバーを非表示にするには：

#element {
    scrollbar-width: none;
}

現在のブラウザが疑似要素またはのいずれかをサポートしているかどうかを確認するにはscrollbar-width、次のスニペットを試してください。

.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not directly involved in
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

（水平バーも非表示になるため、これは実際には質問に対する正しい答えではないことに注意してください。ただし、Googleがここに私をポイントしたときに私が探していたので、とにかく投稿します。）

はい、ちょっと…

あなたが質問をするときは、「ブラウザのスクロールバーは、単に非表示にしたりカモフラージュのではなく、何らかの方法で除去することができる」ことができないため、誰もが「不可」と言うだろう削除 Aにすべてのブラウザからスクロールバーを準拠し、相互互換性のある方法であり、それからユーザビリティの議論全体があります。

ただし、Webページのオーバーフローを許可しない場合は、ブラウザーがスクロールバーを生成して表示する必要がなくなる可能性があります。

これは、ブラウザーが通常私たちに代わって行うのと同じ動作を積極的に代用し、ブラウザーに感謝の意を示すが、感謝の意志は知らせないことを意味するだけです。スクロールバーを削除しようとするのではなく（誰もが可能ではないことがわかっています）、スクロールを回避して（完全に実行可能）、作成してより詳細に制御できる要素内でスクロールします。

オーバーフローを非表示にしたdivを作成します。ユーザーがスクロールしようとしたときに検出しますが、overflow：hidden ..でスクロールするブラウザー機能を無効にしているため検出できません。代わりに、これが発生したときにJavaScriptを使用してコンテンツを上に移動します。これにより、ブラウザのデフォルトのスクロールなしで独自のスクロールを作成するか、iScrollなどのプラグインを使用します。

---

徹底するために; スクロールバーを操作するすべてのベンダー固有の方法：

Internet Explorer 5.5以降

*これらのプロパティはCSS仕様の一部ではなく、承認もベンダーも接頭辞が付いていませんが、Internet ExplorerおよびKonquerorで機能します。これらは、各アプリケーションのユーザースタイルシートでローカルに設定することもできます。Internet Explorerでは、[アクセシビリティ]タブの下にあり、Konquerorでは[スタイルシート]タブの下にあります。

body, html { /* These are defaults and can be replaced by hexadecimal color values */
    scrollbar-base-color: aqua;
    scrollbar-face-color: ThreeDFace;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

Internet Explorer 8の時点で、これらのプロパティはMicrosoftによってプレフィックスが付けられたベンダーでしたが、W3Cによってまだ承認されていませんでした。

-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color

Internet Explorerの詳細

Internet Explorerではscroll、スクロールバーを無効または有効にするかどうかを設定できます。スクロールバーの位置の値を取得するためにも使用できます。

Microsoft Internet Explorer 6以降では、!DOCTYPE宣言を使用して標準準拠モードを指定すると、この属性はHTML要素に適用されます。標準準拠モードが指定されていない場合は、以前のバージョンのInternet Explorerと同様に、この属性はに適用されるBODY要素、NOTHTML要素。

.NETを使用する場合System.Windows.Controls.Primitives、プレゼンテーションフレームワークのScrollBarクラスがスクロールバーのレンダリングを担当することにも注意してください。

http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx

• MSDN。基本的なUIプロパティ
• W3C。非標準のスクロールバーのプロパティについて
• MSDN。.NET ScrollBarクラス

WebKit

スクロールバーのカスタマイズに関連するWebKit拡張機能は次のとおりです。

::-webkit-scrollbar {}             /* 1 */
::-webkit-scrollbar-button {}      /* 2 */
::-webkit-scrollbar-track {}       /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {}       /* 5 */
::-webkit-scrollbar-corner {}      /* 6 */
::-webkit-resizer {}               /* 7 */

これらはそれぞれ、追加の疑似セレクターと組み合わせることができます。

• :horizontal –水平方向の疑似クラスは、水平方向のスクロールバー部分に適用されます。
• :vertical –垂直疑似クラスは、垂直方向のスクロールバー部分に適用されます。
• :decrement–デクリメント疑似クラスは、ボタンとトラックピースに適用されます。これは、ボタンまたはトラックピースが使用時にビューの位置を減らすかどうかを示します（たとえば、垂直スクロールバーの上、水平スクロールバーの左）。
• :increment–インクリメント疑似クラスは、ボタンとトラックピースに適用されます。これは、ボタンまたはトラックピースが使用されたときにビューの位置を増分するかどうかを示します（たとえば、垂直スクロールバーを下に、水平スクロールバーを右に）。
• :start–スタート疑似クラスは、ボタンとトラックピースに適用されます。オブジェクトがサムの前に配置されているかどうかを示します。
• :end– end疑似クラスは、ボタンとトラックピースに適用されます。オブジェクトがサムの後に配置されているかどうかを示します。
• :double-button–二重ボタン疑似クラスは、ボタンとトラックピースに適用されます。ボタンが、スクロールバーの同じ端にあるボタンのペアの一部であるかどうかを検出するために使用されます。トラックピースの場合は、トラックピースがボタンのペアに隣接しているかどうかを示します。
• :single-button–単一ボタン疑似クラスは、ボタンとトラックピースに適用されます。ボタン自体がスクロールバーの最後にあるかどうかを検出するために使用されます。トラックピースの場合、トラックピースがシングルトンボタンに隣接しているかどうかを示します。
• :no-button –トラックピースに適用され、トラックピースがスクロールバーの端まで実行されるかどうか、つまりトラックのその端にボタンがないかどうかを示します。
• :corner-present –すべてのスクロールバーに適用され、スクロールバーのコーナーが存在するかどうかを示します。
• :window-inactive–すべてのスクロールバーに適用され、スクロールバーを含むウィンドウが現在アクティブであるかどうかを示します。（最近のナイトリーでは、この疑似クラスが:: selectionにも適用されるようになりました。コンテンツを操作できるように拡張し、新しい標準疑似クラスとして提案する予定です。）

これらの組み合わせの例

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

• スクロールバーのスタイル-Webkit.org

Chromeの詳細

addWindowScrollHandler public static HandlerRegistration addWindowScrollHandler（Window.ScrollHandler handler）

  Window.ScrollEventハンドラーを追加しますパラメーター：handler-ハンドラー戻り値：ハンドラーの登録を返します[ source ]（http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler（com.google.gwt.user.client.Window.ScrollHandler） ）

Mozilla

Mozillaにはスクロールバーを操作するための拡張機能がいくつかありますが、それらはすべて使用しないことをお勧めします。

• -moz-scrollbars-none これの代わりにoverflow：hiddenを使用することをお勧めします。
• -moz-scrollbars-horizontal オーバーフローxに似ています
• -moz-scrollbars-vertical オーバーフローyに類似

• -moz-hidden-unscrollableユーザープロファイル設定内でのみ内部的に機能します。XMLルート要素のスクロールを無効にし、矢印キーとマウスホイールを使用したWebページのスクロールを無効にします。

• 「オーバーフロー」に関するMozilla開発者ドキュメント

Mozillaの詳細

これは私が知る限り実際には役に立ちませんが、Firefoxでスクロールバーを表示するかどうかを制御する属性は（参照リンク）であることに注意してください。

• 属性：        スクロールバー
• タイプ：               nsIDOMBarProp
• 説明：   ウィンドウにスクロールバーを表示するかどうかを制御するオブジェクト。この属性はJavaScriptでは「置き換え可能」です。読み取り専用

最後になりましたが、パディングは魔法のようなものです。

他のいくつかの回答で前述したように、これは十分に自明であるイラストです。

歴史レッスン

興味があるからといって、スクロールバーの起源について知りたかったのですが、これらは私が見つけた最高のリファレンスです。

• 10スクロールとスクロールバーに関する発明
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

雑多

HTML5仕様ドラフトでは、seamlessスクロールバーがiFrameに表示されないように属性を定義して、ページ上の周囲のコンテンツとブレンドできるようにしました。ただし、この要素は最新のリビジョンでは表示されません。

scrollbarBarPropオブジェクトはの子であるwindowオブジェクトとスクロール機構、またはいくつかの同様のインターフェースの概念が含まれているユーザインタフェース要素を表します。スクロールバーが表示されている場合window.scrollbars.visibleに戻りtrueます。

interface Window {
  // The current browsing context
  readonly attribute WindowProxy window;
  readonly attribute WindowProxy self;
           attribute DOMString name;
  [PutForwards=href] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute UndoManager undoManager;
  Selection getSelection();
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  void close();
  void focus();
  void blur();
  // Truncated

History APIには、ページの読み込み時にスクロール位置を維持するために、ページナビゲーションでのスクロール復元機能も含まれています。

window.history.scrollRestorationscrollrestorationのステータスを確認したり、ステータスを変更したりできます（appending。Auto ="auto"/"manual"がデフォルト値です。これを手動に変更すると、ユーザーがアプリの履歴をたどるときに必要になる可能性のあるスクロールの変更を、開発者が所有することになります。 。必要に応じて、history.pushState（）を使用して履歴エントリをプッシュするときに、スクロール位置を追跡できます。

---

参考文献：

• ウィキペディアのスクロールバー
• スクロールバー（Windows）
• Scrollメソッド
• スクロール方式-Microsoft Dev Network
• GithubのiScroll（上記の最初のセクションで参照）
• Scrolling and Scrollbarsは、Jakob Nielsenによるユーザビリティに関する記事です。

例

• 本体スクロールのない独立したスクロールパネル（CSSのみを使用）-Ben Frain（10-21-2014）

これdivは、オーバーフローを非表示にし、内部をにdiv設定したラッパーで実現できautoます。

内側divのスクロールバーを削除するには、内側にdiv負のマージンを適用して、外側のビューポートから引き出しますdiv。次に、内側のdivに同じパディングを適用して、コンテンツが表示されるようにします。

JSFiddle

HTML

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

CSS

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

これは私にとって単純なCSSプロパティで機能します：

.container {
    -ms-overflow-style: none;  // Internet Explorer 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

古いバージョンのFirefoxの場合は、次を使用します。 overflow: -moz-scrollbars-none;

これが私の解決策です。理論的にはすべての最新のブラウザーをカバーしています。

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

html スクロールバーを非表示にする任意の要素で置き換えることができます。

_{注：私が投稿しているコードがすでにカバーされているかどうかを確認するために、他の19の回答をざっと調べました。2019年の現状をまとめた回答は1つもないようですが、詳細については詳しく説明しています。これが他の誰かから言われ、私がそれを逃した場合はお詫びします。}

あなたがまだ興味があるなら、私はあなたのための回避策を見つけたと思います。今週は最初の週ですが、うまくいきました...

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

モバイルデバイスのスクロールバーを非表示にするソリューションを探している場合は、ピーターの答えに従ってください！

ここだjsfiddle水平スクロールバーを非表示にするには、以下のソリューションを使用しています、。

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

Android 4.0.4搭載のSamsungタブレット（ネイティブブラウザーとChromeの両方のIce Cream Sandwich）とiOS 6搭載のiPad（SafariとChromeの両方）でテストされています。

CSS overflowプロパティを使用します。

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

次にいくつかの例を示します。

• オーバーフロー-x、オーバーフロー-yテスト
• CSSオーバーフロープロパティ

他の人々がすでに言ったように、CSSを使用してくださいoverflow。

ただし、ユーザーが（スクロールバーが表示されていない状態で）そのコンテンツをスクロールできるようにするには、JavaScriptを使用する必要があります。

解決策はここで私の回答をご覧ください：マウス/キーボードでスクロールできる間はスクロールバーを非表示にします

ピーターの答えに加えて：

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

これはInternet Explorer 10でも同じように機能します。

 #element {
      -ms-overflow-style: none;
 }

スクロールバーを非表示にするクロスブラウザーアプローチ。

Edge、Chrome、Firefox、Safariでテストされています

マウスホイールでスクロールできる間、スクロールバーを非表示にします。

Codepen

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}

スクロールを機能させる場合は、スクロールバーを非表示にする前に、スタイリングを検討してください。OS XとモバイルOSの最新バージョンにはスクロールバーがあり、マウスでつかむのは実用的ではありませんが、非常に美しくニュートラルです。

スクロールバーを非表示にするには、John Kurlakのテクニックがうまく機能します。ただし、ホイール付きのマウスがない限り、タッチパッドを持たないFirefoxユーザーがスクロールする方法はありませんが、通常は垂直方向にしかスクロールできません。 。

ジョンの技法は3つの要素を使用します。

• スクロールバーをマスクする外側の要素。
• スクロールバーを持つ中央の要素。
• そして、中央の要素のサイズを設定し、スクロールバーを作成するためのコンテンツ要素。

外側の要素とコンテンツ要素のサイズを同じに設定してパーセンテージの使用を排除することが可能でなければなりませんが、適切な調整で機能しない他のことは考えられません。

私の最大の懸念は、ブラウザのすべてのバージョンがスクロールバーを設定して、オーバーフローしたコンテンツを表示できるようにするかどうかです。現在のブラウザーでテストしましたが、古いブラウザーではテストしていません。

恩赦私のSASS ; P

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

テスト中

OS Xは10.6.8です。WindowsはWindows 7です。

• Firefox 32.0スクロールバーを非表示にしました。クリックしてフォーカスした後でも矢印キーはスクロールしませんが、マウスホイールとトラックパッドの2本の指はスクロールします。OS XおよびWindows。
• Chrome 37.0のスクロールバーを非表示にしました。クリックしてフォーカスした後、矢印キーが機能します。マウスホイールとトラックパッドが機能します。OS XおよびWindows。
• Internet Explorer 11のスクロールバーを非表示にしました。クリックしてフォーカスした後、矢印キーが機能します。マウスホイールが機能します。ウィンドウズ。
• Safari 5.1.10スクロールバーを非表示にしました。クリックしてフォーカスした後、矢印キーが機能します。マウスホイールとトラックパッドが機能します。OSX。
• Android 4.4.4および4.1.2。スクロールバーを非表示にしました。タッチスクロールが機能します。Chrome 37.0、Firefox 32.0、および4.4.4（それが何であれ）のHTMLViewerで試しました。HTMLViewerでは、ページはマスクされたコンテンツのサイズであり、スクロールすることもできます！スクロールは、ページズームと適切に相互作用します。

この質問を読んでいる他の人overflow: hiddenに、body要素の設定（またはオーバーフローy）によってスクロールバーが非表示にならないことを指摘したいと思いました。

html要素を使用する必要がありました。

自動非表示、リトルバージョン、スクロールonly-yまたはonly-xなどのいくつかのオプションを使用してWebKitバージョンを作成しました。

._scrollable{
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;

    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size;
    }

    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;
        }
    }

    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
        &::-webkit-scrollbar {
            background: none;
            width: @size / @little_version_ratio;
            height: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-track {
            border-radius: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: @size / @little_version_ratio;
        }
    }

    &.autoHideScrollbar{
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            &.only-y{
                overflow-y: scroll !important;
                overflow-x: hidden !important;
            }

            &.only-x{
                overflow-x: scroll !important;
                overflow-y: hidden !important;
            }
        }
    }

    &.only-y:not(.autoHideScrollbar){
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen/KmKrjb

このCSSコードを、スクロールバーを非表示にするための顧客コードにコピーします。

<style>

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

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

</style>

私のHTMLは次のとおりです。

<div class="container">
  <div class="content">
  </div>
</div>

divスクロールバーを非表示にする場所にこれを追加します。

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

これをコンテナに追加します

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}

垂直スクロールバーを無効にするには、を追加するだけoverflow-y:hidden;です。

詳しくは、オーバーフローをご覧ください。

私の答えはoverflow:hidden;、jQueryを使用しても、スクロールします：

たとえば、マウスホイールで水平にスクロールします。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>

overflowCSS属性で操作できると思いますが、ブラウザのサポートは限られています。ある情報筋によると、それはInternet Explorer 5（およびそれ以降）、Firefox 1.5（およびそれ以降）、およびSafari 3（およびそれ以降）であり、おそらくあなたの目的には十分です。

Scrolling、Scrolling、Scrollingは良い議論があります。

私はすべてを試しましたが、私の解決策に最も効果的だったのは、常に垂直スクロールバーを表示し、それからいくつかの負のマージンを追加して非表示にすることでした。

body {
  overflow-y: scroll;
  margin-right: -20px;
}