css 怎么设置内容滚动,滚动条隐藏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 怎么设置内容滚动,滚动条隐藏相关的知识，希望对你有一定的参考价值。
css 怎么设置内容滚动，滚动条隐藏
css操作滚动条：::-webkit-scrollbar-track
background-color: #b46868;
/* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-thumb
background-color: rgba(0, 0, 0, 0.2);
/* 滑块颜色 */
::-webkit-scrollbar-button
background-color: #7c2929;
/* 滑轨两头的监听按钮颜色 */
::-webkit-scrollbar-corner
background-color: black;
/* 横向滚动条和纵向滚动条相交处尖角的颜色 */ 参考技术A 貌似不行吧1．overflow内容溢出时的设置
overflow-x水平方向内容溢出时的设置
overflow-y垂直方向内容溢出时的设置
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。
2．scrollbar-3d-light-color立体滚动条亮边的颜色
scrollbar-arrow-color上下按钮上三角箭头的颜色
scrollbar-base-color滚动条的基本颜色
scrollbar-dark-shadow-color立体滚动条强阴影的颜色
scrollbar-face-color立体滚动条凸出部分的颜色
scrollbar-highlight-color滚动条空白部分的颜色
scrollbar-shadow-color立体滚动条阴影的颜色
以上七个属性设置的值都是颜色值，可以使用样式表定义的各种表达方式。
使用以上的样式定义内容，我们可以指定浏览器窗口、多行文本框的滚动条的显示与否和颜色样式，第一组样式属性用于设定被设定对象是否显示滚动条，第二组样式属性则用于设置滚动条的颜色，要注意的本文涉及的样式属性都是ie才能支持的 没有水平滚动条
<body style="overflow-x:hidden">
没有垂直滚动条
<body style="overflow-y:hidden">
没有滚动条
<body style="overflow-x:hidden;overflow-y:hidden">或<body style="overflow:hidden">
请采纳。 参考技术B 一般的做法是在要滚动的区域外层套个DIV ，然后外层的宽度略小于滚动区域的宽度，将滚动条挡住。。。 参考技术C 可以定位一个DIV把滚动条盖住 参考技术D 去掉横向滚动条：<body style='overflow:scroll;overflow-x:hidden'>
去掉竖向滚动条：<body style='overflow:scroll;overflow-y:hidden'>
两个都去掉：<body scroll="no">
css 之内容溢出滚动，隐藏滚动条
解决火狐浏览隐藏不了滚动条问题
1.里层容器的width多17px，外层容器溢出隐藏，能兼容各个浏览器
.outContainer width:350px; height:300px; overflow: hidden; .inContainer height:300px; width: 367px; overflow-x:hidden; overflow-y:scroll;
2.设置 scrollbar-width: none，可兼容
.outContainer
width:350px;
height:300px;
overflow: hidden;
.inContainer
height:300px;
width: 350px;
overflow-x:hidden;
overflow-y:scroll;
scrollbar-width: none;
/* 使用伪类选择器 ::-webkit-scrollbar ,兼容chrome和safari浏览器 */
.inContainer::-webkit-scrollbar
display: none;
/*兼容火狐*/
.inContainer
scrollbar-width: none;
/* 兼容IE10+ */
.inContainer
-ms-overflow-style: none;
html如下
<body>
<div class="outContainer" >
<div class="inContainer">
<div class="inContent" ></div>
<div class="inContent inContent2"></div>
<div class="inContent" ></div>
</div>
</div>
</body>
以上是关于css 怎么设置内容滚动,滚动条隐藏的主要内容，如果未能解决你的问题，请参考以下文章