CSS-界面滚动时不显示滚动条

最近产品提出一个需求,在界面滚动时,元素右侧不显示滚动条。查了网上的答案,最后总结了一下几个情况。

1、设置常规的滚动条:使用 overflow:auto。父元素需要设置一个高度,设置相对定位,这样子元素的高度大于父元素高度才能显示滚动条。如果父元素的高度完全由子元素撑开,界面上不会出现滚动条。设置overflow:auto 失效的主要问题:可能是这个div没有设置 100% 然后父元素清除浮动 (float:none; position: relative;)

.father {
    position: relative;
    height: 100px;
    border: 1px splid red;
}
.son {
    overflow: auto;
    height: 1000px;
}

2、设置鼠标经过显示的滚动条:预设值盒子是 hidden。当鼠标经过这样盒子时,设置盒子的overflow 变成 auto。这样鼠标不经过时不会显示滚动条。缺点:如果盒子内部有文字,盒子的宽度变化可能造成文字的重新排版,视觉上有点不好看。

div {
  overflow: hidden;
}
div:hover {
  overflow: auto;
}

如果内容宽度是百分比或者flex布局,鼠标移动会造成宽度变化,所以可以使用下面的改进版,不同情况父元素设置不同的宽度(2019年7月补充)。

div {
  overflow: hidden;
  width: calc(100% - 8px);
  8px 是滚动条的宽度(在谷歌上显示良好)
}
div:hover {
  overflow: auto;
  width: 100%;
}

3、设置界面可以滚动但是不显示滚动条

方法一:设置滚动条的样式(在 webkit 内核的浏览器比较适合)这样可以同时设置滚动条的宽度和颜色。这种办法很好。

div::-webkit-scrollbar {
  width: 0;
}

方法二:右侧元素设置宽度或者定位,将左侧元素的滚动条遮挡。这样的方法不入流,在移动端兼容不好实现。

div {
  float: right;
  width: 32%
}
div {
  float: left;
  width: 70%;
}

4、系统兼容性和浏览器兼容性(2019-12-02、2020-05-01、2022-07-12补充)

系统兼容性:Windows 下,浏览器需要加上 body { overflow-y: auto } 可以不显示滚动条,Mac 系统下没有这个问题。

浏览器兼容性:webkit 内核浏览器使用 -webkit-scrollbar 效果明显,其他内核效果不明显。

在火狐浏览器下,-webkit-scrollbar 无效,可以使用 scrollbar-width: none; 这样不会显示滚动条

下面的图片是火狐浏览器,显示滚动条的情况

加入 scrollbar-width: none; 后,滚动条不显示,界面可以滚动

其他的浏览器可以尝试用上面几种方法解决

5、Windows 上需要实现 macOS 上的滚动条样式

最近产品又改了需求(一砖头拍死),需要在 Windows 和 Mac 上显示相同的滚动条样式,也就是需要改变 Windows 下面滚动条的样式,那么可以这样处理,可以在 windows 下改变滚动条。

下面是示范代码和实际效果

.your-class::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}

.your-class::-webkit-scrollbar-button {
  display: none;
}

.your-class::-webkit-scrollbar-thumb {
  background-color: rgb(206, 206, 212);
  border-radius: 10px;
}

 默认会在浏览器控制台改变 css 进行测试,如果遇到滚动条是伪类,无法直接更改怎么办?可以直接使用 JS 改变CSS,代码如下,这样在控制台调试滚动条就更方便了。

var style = document.createElement("style");
document.head.appendChild(style);
sheet = style.sheet;

// 这一行改变背景色,用于测试 JS 代码是否执行,类名是否正确
// sheet.addRule('.your-class','background-color: pink');

// 下面三行,用来在控制台修改滚动条样式
sheet.addRule('.your-class::-webkit-scrollbar','width: 8px;height: 8px;');
sheet.addRule('.your-class::-webkit-scrollbar-button','display: none;');
sheet.addRule('.your-class::-webkit-scrollbar-thumb','background-color: rgb(206, 206, 212);border-radius: 10px;');

  • 31
    点赞
  • 78
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值