滚动条自动显示和隐藏

mac的chrome的滚动条会在停止滚动后自动隐藏，开始滚动时显示。但windows的滚动条会一直显示，在设置里设置了自动隐藏也是一样。
这里有个统一的实现，可以使得不同系统在chrome上的滚动条显示一致。原理是用了伪类和伪元素选择器，使滚动条在不hover时透明色，hover时显色。实现了鼠标hover上去时显示滚动条，离开时隐藏。

<div class="container"><div style="overflow-y:auto;"></div>
</div>

/* 先隐藏原滚动条 */
body::-webkit-scrollbar {display: none;
}
body {-ms-overflow-style: none;
}/* hover时显色 */
.container:hover ::-webkit-scrollbar-thumb{background: rgba(0, 0, 0, 0.1);
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {width: 12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);box-shadow: inset006pxrgba(0, 0, 0, 0.3);border-radius: 10px;
}
/* 滚动条滑块 */
/* 默认时隐藏*/
::-webkit-scrollbar-thumb {border-radius: 10px;background: rgba(0, 0, 0, 0.1);-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);box-shadow: inset006pxrgba(0, 0, 0, 0.5);background: transparent;
}

效果

不hover时

hover时

滚动条自动显示和隐藏相关推荐

JavaWeb12_JQuery_广告的自动显示与隐藏
使用目录查看更佳! JQuery学习 JQuery基础概念一个JavaScript框架.简化JS开发 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的 ...
axure 鼠标变成手,Axure教程｜鼠标移入移出自动显示与隐藏三级菜单
前几天因工作需要做一个鼠标移入显示隐藏菜单,鼠标移出自动隐藏菜单, 做的时候觉得没有什么问题,做完后预览就发现一个很严重的问题,就是鼠标移出一级菜单向二级菜单时二级菜单不显示,或者二级菜单显示三级菜单 ...
设置Mac自动显示和隐藏 Dock 栏的速度
Dock 显示和隐藏,系统默认设置成了1秒通过终端.APP修改显示和隐藏的时间 (单位:秒) 默认的: defaults write com.apple.dock autohide-delay ...
MACOS Dock栏自动显示和隐藏取消延迟
使用OS X的时候都会选择将Dock隐藏(可以在系统偏好设置-Dock中选择),等使用时将光标向下划Dock会自动弹出显示.这个显示或隐藏会有一点点(大概1秒左右)的延迟,使用下面的方法可以消除这个延 ...
滚动条如何设置样式和滚动条悬浮显示与隐藏
文章目录一.滚动条如何设置样式 1:滚动条的默认样式(如下图) 1:html代码 2:css代码 3:效果图 2:CSS设置滚动条的属性(重点) 3:设置滚动条的例子 1:css代码(在第1步的基础 ...
PyQt5 技术篇-scrollArea不显示滚动条解决方法，Qt Designer不显示滚动条，滚动条的显示和隐藏
首先给大家展示一下,必显示滚动条的方法. PyQt5设置方法: self.scrollArea.setHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAlwa ...
让Dock即时自动显示和隐藏程序坞不再延迟
转载自AlicFeng的简书Blog 前言在EOS中,我是习惯将Docker隐藏的,想显示的时候就将鼠标移动过去,此时的Dock将即时显示出来,不延迟1微秒的时间,当然也可以搞成延迟.现在本已换成m ...
设置VSCode代码编辑器右侧的Minimap代码缩略图滚动条切换显示、隐藏的快捷键Alt+M
11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

滚动条自动显示和隐藏

效果

滚动条自动显示和隐藏相关推荐

最新文章

热门文章