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

This

< span style=" font - family:宋体;身高:400 px;" >

提供一个div，用户可以在水平和垂直方向上滚动。我如何改变它，使div只能垂直滚动?

当前回答

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

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

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

2020-09-30 04:46:34

其他回答

试试这样。

< span style=" font - family:宋体;身高:400 px;" >

2012-03-14 17:59:07

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

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

2012-03-14 17:59:37

对于100%视口高度使用:

overflow: auto;
max-height: 100vh;

2015-05-29 12:57:23

参考这个要点: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>

2021-06-15 08:46:42

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

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

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

2020-09-30 04:46:34

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

推荐文章

最新文章

标签