.container { overflow: auto; }此时,容器内如果内容超出容器高度,就会出现垂直滚动条。 如果我们还需要水平滚动条,可以使用overflow-x属性:
.container { overflow: auto; overflow-x: auto; }此时,如果容器内的内容超出容器的宽度,就会出现水平滚动条。如果容器内的内容同时超出容器的高度和宽度,就会同时出现水平和垂直滚动条。 当我们需要修改滚动条的样式时,可以使用以下属性:
/*滚动条整体样式*/ ::-webkit-scrollbar { width: 10px; height: 5px; } /*滚动条轨道样式*/ ::-webkit-scrollbar-track { background-color: #f5f5f5; border-radius: 5px; } /*滚动条滑块样式*/ ::-webkit-scrollbar-thumb { background-color: #000; border-radius: 5px; }以上代码是针对webkit浏览器内核的,其他浏览器可能需要使用不同的前缀,如-moz-scrollbar等。 以上就是关于css原生态滚动的基本介绍,希望能对web开发有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。