首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

如何使用 CSS 设置和自定义水平和垂直滚动条

只需使用一行CSS代码即可完成此操作,该行代码使用overflow-y属性。将overflow-y属性设置为scroll会为超出其高度的内容创建一个可滚动的容器。超出侧边栏范围的项目将被隐藏。...可滚动的侧边栏隐藏扩展内容并显示侧边栏的代码片段如下所示: nav{ /* 先前的样式在这里 */ overflow-y: scroll; }关于overflow-y...另一方面,如果将overflow-y属性的值设置为auto,则浏览器只有在目标容器有超出内容时才会添加滚动条。...将overflow-y属性的值设置为auto后,如果没有内容超出容器的边界,浏览器将隐藏滚动条。恭喜您!您已成功创建了一个垂直滚动条。如果需要的话,可以休息一下。...可滚动的容器在上一节中,我们通过将overflow-y属性的值设置为scroll来添加滚动条。您可以猜到这将是什么。你猜对了。属性名叫overflow-x。

15200

CSS vw让overflow:auto页面滚动条出现时不跳动

当前优化这种体验问题,一般有两种解决方法: 高度尺寸不确定的,例如,新浪微博,使用: body { overflow-y: scroll; } ? 高度确定的,例如淘宝网首页。...你说像知乎这样子,高度随内容而定的页面,显然就无法驾驭;而第1种方法overflow-y: scroll,在页面高度较小的时候,依然会保留一个丑陋的灰色的滚动栏,这其实又回到了IE当道的旧社会时代。...} } 更新于2016年9月28日 经过一些列项目实践,关于浏览器出现滚动条和消失页面不滚动有了更加终极的解决方案,经过大型项目实践已经验证相当具有可行性,这里特意分享下: html { overflow-y...: scroll; } :root { overflow-y: auto; overflow-x: hidden; } :root body { position: absolute;

4.1K20
领券