此
<div id="" style="overflow:scroll; height:400px;">
给出div，用户可以水平和垂直滚动。如何更改它以使div 仅可垂直滚动？
答案 0 :(得分：611)
除了使用错误的属性外，您还可以使用它。可以使用任何属性overflow，overflow-x或overflow-y触发滚动条，每个属性都可以设置为visible，hidden，scroll中的任何一个}，auto或inherit。您目前正在研究这两个：
auto - 此值将查看框的宽度和高度。如果它们被定义，它将不会让框扩展超过这些边界。相反（如果内容超过这些边界），它将为超出其长度的边界（或两者）创建滚动条。
scroll - 即使内容未超出边界集，此值强制滚动条，无论如何。如果不需要滚动内容，则栏将显示为“已禁用”或非交互式。
如果总是希望显示垂直滚动条：
您应该使用overflow-y: scroll。无论是否需要，强制滚动条都会显示为垂直轴。如果您无法实际滚动上下文，它将显示为“已禁用”滚动条。
如果您只想滚动框，则只需要显示滚动条：
只需使用overflow: auto即可。由于默认情况下，当内容无法适应当前行时，您的内容会突破到下一行，因此不会创建水平滚动条（除非它位于禁用自动换行的元素上）。对于垂直条，它将允许内容扩展到您指定的高度。如果超过该高度，它将显示一个垂直滚动条以查看其余内容，但如果不超过高度则不会显示滚动条。
答案 1 :(得分：224)
试试这样。
<div style="overflow-y: scroll; height:400px;">
答案 2 :(得分：100)
对于100％视口高度使用：
overflow: auto;
max-height: 100vh;
答案 3 :(得分：45)
在div上使用overflow-y: auto;。
另外，您也应该设置宽度。
答案 4 :(得分：23)
您可以改用此代码。
<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">
overflow-x ：overflow-x属性指定如何处理内容的左/右边缘 - 如果它溢出元素的内容区域。
overflow-y ：overflow-y属性指定如何处理内容的上/下边缘 - 如果它溢出元素的内容区域。
值
可见：默认值。内容不会被剪裁，也可能会在内容框外呈现
隐藏：内容被剪裁 - 并且没有提供滚动机制
滚动：剪辑内容并提供滚动机制
自动：应该为溢出的框提供滚动机制
初始：将此属性设置为其默认值
inherit 从其父元素继承此属性。
答案 5 :(得分：11)
您可以使用overflow-y: scroll进行垂直滚动。
<div style="overflow-y:scroll; height:400px; background:gray">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
答案 6 :(得分：7)
对我来说，所有这些答案的问题是他们没有反应。我必须有一个固定的高度为父div，我不想要。我也不想花大量时间来处理媒体查询。如果您正在使用angular，您可以使用bootstraps tabset，它将为您完成所有艰苦的工作。您将能够滚动内部内容，它将是响应式的。设置标签时，请执行以下操作：$scope.tab = { title: '', url: '', theclass: '', ative: true }; ...重点是，您不需要标题或图片图标。然后在cs中隐藏选项卡的轮廓，如下所示：
.nav-tabs {
border-bottom:none;
}
以及此.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;}
最后删除隐藏的标签，如果您不实现此功能，仍然可以点击该标签：.nav > li > a {padding:0px;margin:0px;}
答案 7 :(得分：1)
以上答案对一半的问题给出了很好的解释。对于另一半。
为什么不只是隐藏滚动条本身。 这样，由于大多数人（包括我）讨厌滚动条，因此它看起来会更具吸引力。 您可以使用此代码
::-webkit-scrollbar {
width: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}