QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

手机号码,快捷登录

手机号码,快捷登录

查看: 1667|回复: 0

[HTML/CSS/JS] css隐藏滚动条

[复制链接]

等级头衔

积分成就    金币 : 2857
   泡泡 : 1516
   精华 : 6
   在线时间 : 1317 小时
   最后登录 : 2025-4-23

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2023-4-23 12:25:41 | 显示全部楼层 |阅读模式
隐藏滚动条主要有两个方法:
* R" u5 k7 n4 ]3 Y
  • 计算滚动条的宽度,将滚动条平移到显示区域以外的地方
  • 使用::-webkit-scrollbar隐藏滚动条! I* v  @1 B; `( ?  X+ Y4 ?
之前在网上看到与人使用三个容器将其包裹起来,第二层的容器在使用webkit-scrollbar隐藏滚动条。这种方式个人感觉有点多次一举,还不如直接使用-webkit-scrollbar进行隐藏。1 ?8 G" \0 ]! G: ]# Y% \& z- o4 L
接下来我们依次来看看具体的实现代码吧?$ P" z) O# b1 w/ Z% r3 H4 a
1.计算滚动条并隐藏+ L6 a  t: K0 M- k. z6 n- m
对于这个方法,我们将其分为两个部分,第一个就是html,如下所示:
  x2 }/ e" ~# i* N
<div class="container">
    <div class="sub-container">
         人步入老年,越接近人生的终点,就越对已经过去的往事产生怀旧和留恋感,甚至对已经烟消云散之事仍泛起情感的涟漪,这是许多老年人都想写部回忆录的原因。赶在人生落幕之前,自己给自己一个满意的台词。
    </div>
</div>
css部分如下所示:
# ~2 [$ f2 Z, g
.container{
    width: 100px;
    height: 200px;
    position: relative;
    overflow: hidden;
}
.sub-container{
    position: absolute;
    left: 0;
    top: 0;
    right: -17px;/*主要代码计算滚动条的宽度,将其平移到显示区域以外的地方*/
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll; /* 允许垂直滚动*/
}
注意:顶层容器使用了overflow隐藏超出部分,内容容器使用了定位的方式向右平移了17个像素,这样就能实现隐藏滚动条的效果
2.使用::-webkit-scrollbar隐藏滚动条% I  J; O6 E5 ?" k
顶层容器允许垂直滚动并使用webkit-scrollbar隐藏滚动条。但是这个方法有很多兼容性问题,尤其是IE浏览器,其他浏览器基本没问题0 ?& J6 \$ X7 J
.container{
    width: 100px;
    height: 200px;
    overflow: auto;
}
/* 隐藏css代码 */
.container::-webkit-scrollbar {
    width: 0 !important; /* 设置滚动条的宽度为0或者使用下方代码直接不显示 */
    display:none;
}
/*IE 10+*/
.container{
    -ms-overflow-style: none;
}
/*Firefox*/
.container{
    overflow: -moz-scrollbars-none;
}
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2025-4-25 08:51

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表