This
< span style=" font - family:宋体;身高:400 px;" >
提供一个div,用户可以在水平和垂直方向上滚动。我如何改变它,使div只能垂直滚动?
This
< span style=" font - family:宋体;身高:400 px;" >
提供一个div,用户可以在水平和垂直方向上滚动。我如何改变它,使div只能垂直滚动?
当前回答
使用overflow-y: auto;在div上。
此外,您还应该设置宽度。
其他回答
使用overflow-y: auto;在div上。
此外,您还应该设置宽度。
好吧,上面的答案已经很好地解释了一半的问题。为了另一半。
为什么不直接隐藏滚动条本身呢? 这样看起来更吸引人,因为大多数人(包括我)都讨厌滚动条。 您可以使用此代码
::-webkit-scrollbar {
width: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
The problem with all of these answers for me was they weren't responsive. I had to have a fixed height for a parent div which i didn't want. I also didn't want to spend a ton of time dinking around with media queries. If you are using angular, you can use bootstraps tabset and it will do all of the hard work for you. You'll be able to scroll the inner content and it will be responsive. When you setup the tab, do it like this: $scope.tab = { title: '', url: '', theclass: '', ative: true }; ... the point is, you don't want a title or image icon. then hide the outline of the tab in cs like this:
.nav-tabs {
border-bottom:none;
}
还有这个。nav-tabs > li。激活> a, .nav-tabs > li。Active > a:hover, .nav-tabs > li。Active > a:focus {border:none;} 最后,删除不可见的选项卡,如果你不实现这个,你仍然可以点击:.nav > li > a {padding:0px;margin:0px;}
试试这样。
< span style=" font - family:宋体;身高:400 px;" >
我在代码中添加了一些注释用于解释。这里有一些参考: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>