0

cssはたまにしか使いませんが、以下のようにすればスクロール可能な領域が作れたらいいなと思いました。代わりに、収まらないすべてのテキストを非表示にするだけのように見えますが、スクロールする方法はありません. 動作は chrome/ie/firefox でも同じように見えるので、何か間違ったことをしているだけだと思います。

index.html

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Foo</title>
  </head>
  <body>
    <div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum placerat mi vel risus ultricies non bibendum urna vestibulum. Curabitur volutpat, turpis vel suscipit accumsan, lectus nibh blandit sem, ut elementum massa tortor quis augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus lacus ac diam sollicitudin tempor. Vivamus at sagittis lacus. Donec augue neque, cursus in tristique at, mattis vitae eros.
    </div>
  </body>
</html>

スタイル.css

#history {
    height: 200px;
    width: 200px;
    border: 1px solid #666;
    padding: 8px;
}

.scroll-area {
    overflow-style: auto;
    overflow: hidden;
}

非スクロール画像の例

4

6 に答える 6

1

でスクロールバーを非表示にしoverflow: hidden;ます。

次のように変更した場合:

.scroll-area {
    overflow-style: auto;
    overflow: auto;
}
于 2013-04-25T17:17:05.430 に答える
1

HTML

<div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum place
</div>

CSS

#history {
    height: 200px;
    width: 200px;
    border: 1px solid #666;
    padding: 8px;
}

.scroll-area {
    overflow-style: auto;
    overflow: scroll;
}

デモ

http://jsfiddle.net/YxsLc/1/

説明

html要素のコンテンツをスクロールしたい場合は、プロパティを使用する必要がありますoverflow: scroll。

将来のコードで頑張ってください。

于 2013-04-25T17:20:08.270 に答える