HTMLページのスクロールバーを隠す

Question

CSSを使ってスクロールバーを隠すことはできますか？どうしますか？

Answer 1

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

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

更新日：私は目を覚ました、すみません、隠されたことを意味:-)

---

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

Answer 2

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が私をここに指し示したときに私が探していたので、私は考えましたdとにかくそれを投稿します。）

Answer 3

はい。

「ブラウザのスクロールバーを単に隠したり偽装したりするのではなく、何らかの方法で削除することはできますか」という質問をすると、削除 the準拠および相互互換性のある方法ですべてのブラウザからのスクロールバー、そしてそれからユーザビリティの全体的な議論があります。

ただし、Webページがオーバーフローしないようにすると、ブラウザがスクロールバーを生成して表示する必要がなくなるのを防ぐことができます。

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

オーバーフローを隠したdivを作成します。ユーザーがスクロールしようとしたがオーバーフローしてスクロールするブラウザの機能を無効にしたためにできなかった場合を検出します。これが発生した場合は代わりにJavascriptを使用してコンテンツを上に移動します。これにより、ブラウザのデフォルトのスクロールや iScroll のようなプラグインを使用せずに、独自のスクロールを作成できます。

---

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

Internet Explorer 5.5以降

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

body, html { /* these are default, can be replaced by hex 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;
}

IE8の時点では、これらのプロパティは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に関する詳細

IEはスクロールバーを無効にするか有効にするかを設定するscrollを利用可能にします。スクロールバーの位置の値を取得するためにも使用できます。

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

また、.NETで作業するときには、PresentationフレームワークのSystem.Windows.Controls.Primitives内のScrollBarクラスがスクロールバーのレンダリングを担当することにも注目する価値があります。

http://msdn.Microsoft.com/ja-jp/library/ie/ms534393(v=vs.85).aspx

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

---

ウェブキット

スクロールバーのカスタマイズに関連する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 - start疑似クラスはボタンとトラック部分に適用されます。オブジェクトがサムの前に配置されているかどうかを示します。
• :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ハンドラ）

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

---

Mozilla

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

• -moz-scrollbars-none彼らは、overflow：を使うことを推奨しています。
• -moz-scrollbars-horizontal overflow-xに似ています
• -moz-scrollbars-vertical overflow-yに似ています

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

• 「オーバーフロー」に関するMozilla Developer Docs

Mozillaに関する詳細

私の知る限りこれはあまり役に立ちませんが、Firefoxでスクロールバーを表示するかどうかを制御する属性は次のとおりです。（ reference link ）

• 属性： scrollbars
• タイプ： 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仕様のドラフトでは、スクロールバーがiFrameに表示されないようにseamless属性が定義されていて、ページ上の周囲のコンテンツとブレンドできるようになっています。 しかし、この要素は最新のリビジョンには現れません。

scrollbar BarPropオブジェクトは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

履歴APIには、ページロード時のスクロール位置を維持するためにページナビゲーションでのスクロール復元の機能も含まれています。 window.history.scrollRestorationはscrollrestorationの状態をチェックしたり、その状態を変更するのに使うことができます（="auto"/"manual"を追加します。デフォルトはAutoです。手動に変更すると、ユーザーがスクロールしたときに必要となるスクロールの変更の所有権が開発者になります）必要に応じて、history.pushState（）で履歴エントリをプッシュするときにスクロール位置を追跡できます。

---

参考文献：

• ウィキペディアのスクロールバー
• スクロールバー（Windows）
• スクロール方法
• スクロール方法 - Microsoft Dev Network
• GithubでのiScroll（上記の最初のセクションで参照）
• Scrolling and ScrollbarsがJakob Nielsenによるユーザビリティについての記事 /

例

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

Answer 4

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

内側の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;
}

Answer 5

これは私にとっては単純なCSSプロパティで動作します。

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

更新： Firefox用の新しいscrollbar-widthプロパティを追加しました。

Firefoxの古いバージョンの場合は、overflow: -moz-scrollbars-none;を使用してください。

Answer 6

私はあなたがまだ興味があるなら、私はあなたの周りの作業を見つけたと思います。これは私の最初の週ですが、それは私のために働きました..

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

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

Answer 7

モバイル機器のスクロールバーを隠すための解決策を探しているなら、 Peterの答えに従ってください ！

これは jsfiddle です。これは以下の解決策を使って水平スクロールバーを隠します。

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

Android 4.0.4を搭載したSamsungタブレット（ネイティブブラウザとChromeの両方）およびiOS 6を搭載したiPad（SafariとChromeの両方）でテスト済み。

Answer 8

つかいます cssオーバーフロープロパティ：

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

以下にいくつかの例を挙げます。

• http://www.brunildo.org/test/Overflowxy2.html
• http://css-tricks.com/the-css-overflow-property/ /

Answer 9

クロスブラウザでスクロールバーを非表示にする方法。

テスト済みエッジ、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;
}

Answer 10

他の人がすでに言ったように、CSSオーバーフローを使用してください。

スクロールバーが表示されていなくても、そのコンテンツをユーザーがスクロールできるようにしたい場合は、JavaScriptを使用する必要があります。解決策については、私の答えをここで参照してください。 スクロールバーを非表示にしたままマウス/キーボードでスクロールできる

Answer 11

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

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

これはIE10でも同じように動作します。

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

Answer 12

スクロールバーを非表示にする前にスクロールを有効にしたい場合は、スタイルを変更することを検討してください。最近のバージョンの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スクロールバーが非表示になりました。クリックしてフォーカスを合わせると、矢印キーが機能します。マウスホイールとトラックパッドが機能します。 OS X.
• アンドロイド4.4.4と4.1.2。スクロールバーは非表示になりました。タッチスクロール機能Chrome 37.0、Firefox 32.0、および4.4.4上のHTMLViewerで試しました（それが何であれ） HTMLViewerでは、ページはマスクされたコンテンツのサイズであり、スクロールすることもできます。スクロールは、ページのズーミングと適切に相互作用します。

Answer 13

Body要素にoverflow：hidden（またはoverflow-y）を設定してもスクロールバーが隠れないことを、この質問を読んでいる他の誰かに指摘したいと思いました。私はHTML要素を使わなければなりませんでした。

Answer 14

auto hide 、 little version 、scroll only-y または only-x のようにいくつかのオプションを指定してWebキットバージョンを書きました。

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

Answer 15

私の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%;
}

Answer 16

スクロールバーを非表示にするには、このCSSコードを顧客コードにコピーしてください

  <style>

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

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

  </style>

Answer 17

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

overflow についてもっと詳しく

Answer 18

私が投稿したコードが既にカバーされているかどうかを確認するために他の19の答えをスキムしました、そして2019年に立つように状況を完全にまとめている答えはありません。謝罪これが他の誰かによって言われたならば、そして私はそれを逃しました。

だからここに私の解決策は、理論的にすべての現代のブラウザをカバーしています：

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

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

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

Answer 19

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>

Answer 20

オーバーフローCSS属性でそれを操作できると私は信じていますが、彼らはブラウザサポートを制限しました。ある情報筋によれば、IE5以降、Firefox 1.5以降、およびSafari 3以降だという。おそらくあなたの目的には十分だろう。

このリンクはよく議論されています： http://www.search-this.com/2008/03/26/scrolling-scrolling-scrolling/