使用CSS制作一个垂直滚动的div

这

. 
<div id="" style="overflow:scroll; height:400px;">

gives a div that the user can scroll in both in horizontally and vertically. How do I change it so that the div is only scrollable vertically?

1461742 次浏览
小开

试试这样。

<div style="overflow-y: scroll; height:400px;">

小开

在div上使用overflow-y: auto;。

此外，您还应该设置宽度。

小开
最佳答案

除了使用错误的属性外，你已经把它覆盖住了。滚动条可以用任何属性overflow、overflow-x或overflow-y触发，每个属性都可以设置为visible、hidden、scroll、auto或inherit中的任何一个。你现在看到的是这两个:

  • auto -这个值将查看框的宽度和高度。如果它们被定义了，它就不会让盒子扩展超过这些边界。相反(如果内容超过了这些边界)，它将为超过其长度的任何一个边界(或两个边界)创建滚动条。

  • scroll -这个值强制滚动条，无论如何，即使内容没有超过设置的边界。如果内容不需要滚动，该工具条将显示为“禁用”或非交互式。

如果你always想要垂直滚动条出现:

您应该使用overflow-y: scroll。不管是否需要，这个部队滚动条都会出现在垂直轴上。如果不能滚动上下文，它将显示为“禁用”滚动条。

如果你只希望滚动框出现滚动条:

使用overflow: auto即可。因为在默认情况下，当您的内容无法在当前行中放置时，它会切换到下一行，因此不会创建水平滚动条(除非它位于禁用了换行功能的元素上)。对于垂直栏，它将允许内容扩展到您所指定的高度。如果它超过了这个高度，它将显示一个垂直滚动条来查看其余的内容，但如果它没有超过这个高度，它将不显示滚动条。

小开

您可以使用此代码代替

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">
< p > < br > overflow-x: overflow-x属性指定内容的左右边如何处理——如果它溢出了元素的内容区域 overflow-y: overflow-y属性指定如何处理内容的上/下边缘-如果它溢出元素的内容区域 值< br > 可见:默认值。内容没有被剪切，它可以在内容框外呈现 隐藏的:内容被剪切-并且没有提供滚动机制 滚动:剪切内容并提供滚动机制 汽车:应该为溢出的盒子提供滚动机制 最初的:将该属性设置为默认值 inherit从父元素继承此属性

小开

对我来说，所有这些答案的问题是他们没有回应。我必须有一个固定的高度为父div，我不想要。我也不想花大量的时间去回答媒体的问题。如果你使用的是angular，你可以使用bootstrap选项卡，它会为你做所有艰难的工作。你可以滚动内部内容，它会有响应。当你设置选项卡时，这样做:$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;}

小开

对于100%视口高度使用:

overflow: auto;
max-height: 100vh;
小开

您可以使用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>

小开

好吧，上面的答案已经很好地解释了一半的问题。为了另一半。

为什么不隐藏滚动条本身呢? 这样看起来更吸引人，因为大多数人(包括我)都讨厌滚动条。 您可以使用此代码

::-webkit-scrollbar {
width: 0px;  /* Remove scrollbar space */
background: transparent;  /* Optional: just make scrollbar invisible */
}
小开

参考这个要点:https://gist.github.com/zeoneo/5f9fff92a12aa6d9d42065b5df68e9d5

它可能会帮助您创建一个使用flex和具有自滚动分割窗格的布局。

body {
background-color: aquamarine;
margin: 0;
padding: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
background-color: bisque;
}
.left {
width: 300px;
background-color: lightblue;
overflow: auto;
scroll-behavior: smooth;


}
.right {
flex:1;
background-color: lightcoral;
overflow: auto;
scroll-behavior: smooth;
}
.sidebar-item {
display: block;
height: 100px;
background-color: lightseagreen;
margin: 5px;
}
.header {
display: block;
height: 100px;
flex:none;
background-color: aqua;
}
.content {
flex:1;
background-color: brown;
display: flex;
overflow: auto;
}
<html>
<head>
<title>Hello World</title>


</head>
<body>
<div class="container">
<div class="header">
Header
</div>
<div class="content">


<div class="left myscroll">
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
</div>
<div class="right">
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
<div class="sidebar-item"></div>
</div>
</div>


</div>
</body>
</html>

小开

我在代码中添加了一些注释用于解释。这里有一些参考:https://www.w3schools.com/css/css_overflow.asp

div {
overflow-y: auto; /* the auto value is similar to scroll, but it adds scrollbars only when necessary */
word-break: keep-all; /* this is optional, so the words keep in one line */
white-space: nowrap; /* this is optional, so the div can expands to the side */
}
<div>
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>


提交答案