css怎么隐藏滚动条「建议收藏」

css怎么隐藏滚动条「建议收藏」法一:①使用伪类隐藏滚动条(仅限Chrome与Safari)②scrollbar-width:none;(仅限firefox)③-ms-overflow-style:none;(仅限IE10+)/*隐藏滚动条*/.element{width:100%;height:72px;box-sizing:border-box;padding-top:16px;overflow-x:scroll;/*设置溢出滚动*/white-spa

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

法一:
①使用伪类隐藏滚动条(仅限Chrome与Safari)
②scrollbar-width: none;(仅限firefox)
③-ms-overflow-style: none;(仅限IE 10+)

/* 隐藏滚动条 */
.element {

   width: 100%;
   height: 72px;
   box-sizing: border-box;
   padding-top: 16px;
   overflow-x: scroll; /* 设置溢出滚动 */
   white-space: nowrap;
   overflow-y: hidden;
   /* 隐藏滚动条 */
   scrollbar-width: none; /* firefox */
   -ms-overflow-style: none; /* IE 10+ */
}
.element::-webkit-scrollbar {

    display: none; /* Chrome Safari */
}

法二:
可滚动的容器外层再签套一个父盒子,父盒子设置overflow:hidde,再配合position,变相隐藏滚动条

 <div class=”outer-container”>
     <div class=”inner-container”>
     </div>
 </div>

.outer-container {

    position: relative;
    overflow: hidden;
}
.inner-container {

    position: absolute; 
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}
 /* for Chrome */
.inner-container::-webkit-scrollbar {

    display: none;
}
 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/203571.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 用Python的turtle库画太极图

    用Python的turtle库画太极图作为一名中医药大学的学生,对太极图那是情有独钟,这不,我刚开始学Python不久,便想着用turtle库画一个太极图,对turtle库的使用还不熟练,代码量可能有点多……代码:importturtler=200#太极半径turtle.pensize(2)#画笔尺寸#将太极的圆心调整至坐标原点turtle.right(90)turtle.penup()#拿起画笔turtle.fd(r)turtle.pendown()#落下画笔turtle.right(90)#调整海

    2022年5月18日
    38
  • xshell怎么连接vmware虚拟机_虚拟机centos7怎么联网

    xshell怎么连接vmware虚拟机_虚拟机centos7怎么联网XShell下载地址:https://en.softonic.com/download/xshell安装步骤默认即可,安装XShell完成后进行连接。文件——>新建配置连接信息在虚拟机中输入ifconfig即可获得主机IP信息,即inetaddr后面的数字。如果输出的主机IP是127.0.0.1,可以参考该篇博客解决这个问题。点击用户身份验证,输入用…

    2022年9月15日
    0
  • mysql1396错误_MySQL 1045

    mysql1396错误_MySQL 1045提示错误:ERROR1396(HY000):OperationRENAMEUSERfailedfor’root’@’%’为了避免mysql中的安全隐患,将默认的root用户重命名。使用 renameuser 命令修改root用户名失败,改用updatemysql用户下的user表后修改成功。   …

    2022年8月12日
    5
  • 最炫民族风70个版本大合集[通俗易懂]

    最炫民族风70个版本大合集[通俗易懂]杜甫和奥特曼都已经沦陷了…..01.女生宿舍版02.青岛理工版03.杜甫版04.凉宫春日版05.名扬四海版06.奥特曼版……查看看更多转载于:https://www.cnblogs.com/ShiningRay/archive/2012/04/08/2437543.html…

    2022年9月2日
    3
  • [Go] Go语言实现post请求时发送header头信息[通俗易懂]

    [Go] Go语言实现post请求时发送header头信息[通俗易懂]有些接口需要增加header头信息,里面传递token,这个时候就要求在post的时候能传递自己的header信息funcPostHeader(urlstring,msg[]byte,headersmap[string]string)(string,error){client:=&http.Client{}req,err…

    2022年7月16日
    33
  • Go语言爱好者周刊:第 3 期

    Go语言爱好者周刊:第 3 期这里记录每周值得分享的Go语言相关内容,周日发布。欢迎投稿,推荐或自荐文章/软件/资源等,请提交issue[1]。鉴于大部分人可能没法坚持把英文文章看完,因此,周…

    2022年5月20日
    36

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号