html隐藏滚轮条

html隐藏滚轮条,第1张

概述原文:https://www.cnblogs.com/lovling/p/8000363.html 方法一, 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>超出部分隐藏滚动条</title></

原文:https://www.cnblogs.com/lovling/p/8000363.html

方法一,利用 CSS 3 的新特性  -webkit-scrollbar,但是这种方式不兼容 火狐 和 IE

<!DOCTYPE HTML><HTML><head>    <Meta charset="UTF-8">    <Title>超出部分隐藏滚动条</Title></head><style type="text/CSS">    #Box {        wIDth: 500px;        height: 300px;        overflow-x: hIDden;        overflow-y: scroll;        line-height: 30px;        text-align: center;    }    #Box::-webkit-scrollbar {        display: none;    }</style><body>    <!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->    <div ID="Box">        你好 </br>你好 </br>        你好 </br>你好 </br>        你好 </br>你好 </br>        你好 </br>你好 </br>        你好 </br>你好 </br>        你好 </br>你好 </br>        你好 </br>你好 </br>    </div></body></HTML>

方法二,利用内外层嵌套,模拟,兼容所有浏览器,相对于方法一比较麻烦,使用时不能对滚动条声明任何样式

<!DOCTYPE HTML><HTML><head>    <Meta charset="UTF-8">    <Title>超出部分滚动条</Title></head><style type="text/CSS">    #Box {        /* 父容器设置宽度,并超出部分不显示 */        wIDth: 500px;        height: 300px;        overflow: hIDden;    }    #Box > div {        /* 子容器比父容器的宽度多 17 px,经测正好是滚动条的默认宽度 */        wIDth: 517px;        height: 300px;        line-height: 30px;        text-align: center;        overflow-y: scroll;    }</style><body>    <!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->    <div ID="Box">        <div>            你好 </br>你好 </br>            你好 </br>你好 </br>            你好 </br>你好 </br>            你好 </br>你好 </br>            你好 </br>你好 </br>            你好 </br>你好 </br>            你好 </br>你好 </br>        </div>    </div></body></HTML>

 

另参考:https://www.cnblogs.com/xiaostudy/p/10821191.html

总结

以上是内存溢出为你收集整理的html隐藏滚轮条全部内容,希望文章能够帮你解决html隐藏滚轮条所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1038970.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-24
下一篇 2022-05-24

发表评论

登录后才能评论

评论列表(0条)

保存