Question

我很少使用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>

的style.css

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

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

Non-scrolling picture example

Answer 1

如果您需要始终显示滚动条，则应明确将overflow设置为auto（或scroll}：

.scroll-area {
    overflow: auto;
}

DEMO： http://jsfiddle.net/aNTHx/

Answer 2

您使用的是overflow-style，但在任何主要浏览器中都不支持..

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

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

Answer 3

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

Answer 4

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

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

或者如果你想横向滚动：

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

Answer 5

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

如果您更改为：

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

Answer 6

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

Goodluck在未来的代码中。

div滚动条没有出现

6 个答案: