0

我不经常使用 css，但我认为下面应该创建一个可滚动区域。相反，它似乎只是隐藏了所有不适合但无法滚动的文本。chrome/ie/firefox 中的行为似乎相同，所以我猜我只是做错了什么。

索引.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

2

您应该明确设置overflow为auto（或者scroll如果您需要滚动条一直出现）：

.scroll-area {
    overflow: auto;
}

演示：http: //jsfiddle.net/aNTHx/

于 2013-04-25T17:15:41.783 回答
2

好吧，您正在使用overflow-style尚未在任何主要浏览器中受支持的..

设置overflow为自动或滚动.scroll-area将使垂直滚动条按预期显示

http://jsfiddle.net/kRcaR/1/

于 2013-04-25T17:16:43.380 回答
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 回答
1

您需要设置overflow: auto或者如果您只想滚动 y 轴overflow-y: auto; overflow-x: hidden；

于 2013-04-25T17:16:26.317 回答
1

您的 div 应该具有垂直滚动的溢出样式：

.scroll-area {
  overflow-y: scroll;
}

或者如果你想水平滚动：

.scroll-area {
  overflow-x: scroll;
}
于 2013-04-25T17:16:34.960 回答
1

您用 隐藏滚动条overflow: hidden;。

如果您更改为：

.scroll-area {
    overflow-style: auto;
    overflow: auto;
}
于 2013-04-25T17:17:05.430 回答