9

1つのdiv内をスクロールできるようにしようとしていますが、実際のスクロールバーは表示されません。

ユーザーがスクロールホイールを使用してスクロールできるようにする必要があります

誰かが私がこれを達成する方法についてアイデアを持っていますか？

ありがとう！

4

3 に答える 3

12

まあ、本当の理由はあなたがそれを望む理由でしょう、しかしあなたが尋ねたので私はあなたの問題を解決しようとします。

2つのdivが必要になります。一方が他方の中にネストされています。

<div class="outside">
    <div class="inside">
        Scrolling Content Goes here.
    </div>
</div>

次に、この状況を解決するためにCSSが必要になります。オーバーフロー：自動は、高さの制限を超えるとスクロールを提供します。例のためにランダムな幅を付けました。右側にパディングを配置して、スクロールバーを.outerdivクラスから押し出します。このようにして、.outerdivの下にあるコンテンツについて心配する必要はありません。

.inside { width: 500px; overflow: auto; height: 300px; padding-right: 20px; }

外部クラスの場合、同じ高さ、同じ幅を指定する必要がありますが、overflow：hiddenです。

.outside { width: 500px; height: 300px; overflow: hidden; }

例：jsFiddle

于 2012-08-29T20:49:17.170 に答える
0

たぶん、cssを使用して非表示にするか、非表示に見えるようにスタイリングを行うことができます。これが私が見つけたいくつかのリンクです。

http://css-tricks.com/custom-scrollbars-in-webkit/

http://www.yourhtmlsource.com/stylesheets/scrollbars.html

于 2012-08-29T20:46:49.293 に答える
0

これはIEとFirefoxでテストされました。どちらもパディングの処理が少し異なるため、コンテンツの可視性を考慮して高さと幅を使用しています。

コンテナ用とコンテンツ用の2つのコンテナを用意するのは理にかなっていますが、ブラウザはパディングの処理方法が異なるため、スクロールバーを非表示の領域に押し込むのは想像以上に困難です。これが3番目のコンテナの出番です。

  • スクロールバーのない親ディメンション用の1つのコンテナ
  • 非表示領域にプッシュされるスクロールバーを含む1つのコンテナ
  • 正しい幅が設定されたコンテンツを格納する1つのコンテナ

これは、スタイルシートのトリックによって実現されます。スタイルシートにはコメントが付けられているため、そこにある指示/コメントに従うことができます。

お役に立てれば！:)

<html>
<head>
    <style type="text/css">
    /* Propetary paragraph style */
    p {
        padding: 0px;
        margin: 0px 0px 7px 0px;
    }
    /* Global notes:
       - Since the 
    /* This is the outer container - set desired height and width here */
    .scrollabelDivContainer {
        width: 300px;
        height: 100px;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
        border: 2px dashed #ddd;
    }
    /* This is the div inside the container - the height should 
       match the container and width be more (to push the 
       scrollbar into the hidden content area) */
    .scrollableDiv {
        width: 400px;
        height: 100px;
        padding: 0px;
        margin: 0px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    /* This houses the content.  Set the widget 10px less than the 
       container width to ensure the content is visible in all browsers */
    .scrollableDivContent {
        width: 290px;
        padding: 0px;
        margin: 0px;
        overflow: auto;
    }
    </style>
</head>

<body>
    <div class="scrollabelDivContainer">
        <div class="scrollableDiv">
            <div class="scrollableDivContent">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt consequat urna ut tincidunt. Vestibulum molestie leo quis dui malesuada vulputate eget tempor purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras nec orci enim, vel tristique lectus. Sed lobortis ultrices enim eu consequat.</p>
                <p>Integer magna lectus, iaculis sit amet interdum nec, ullamcorper ut purus. Sed aliquam sollicitudin lacinia. Proin porttitor aliquet lorem, eu dictum lorem suscipit et. Ut vestibulum eros quis turpis auctor id sollicitudin risus faucibus. Quisque volutpat nibh ut sem euismod rutrum. Ut eget orci non quam scelerisque laoreet sit amet a metus. Mauris aliquam facilisis lacinia.<p>
            </div>
        </div>
    </div>
</body>

</html>
于 2012-08-29T21:15:22.533 に答える