资讯专栏INFORMATION COLUMN

纯css修改浏览器scrollbar滚动条样式

wapeyang / 2818人阅读

使用css修改浏览器滚动条样式

::-webkit-scrollbar {
  width: .5rem;
  height: .5rem;
  background: hsla(0, 0%, 100%, 0.6);
}

::-webkit-scrollbar-track {
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: rgba(95,95,95,.4);
  transition: all .2s;
  border-radius: .5rem;

  &:hover {
    background-color: rgba(95,95,95, .7);
  }
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53313.html

相关文章

  • css修改览器scrollbar滚动样式

    使用css修改浏览器滚动条样式 showImg(https://segmentfault.com/img/bVbjQ9D); ::-webkit-scrollbar { width: .5rem; height: .5rem; background: hsla(0, 0%, 100%, 0.6); } ::-webkit-scrollbar-track { border-radi...

    android_c 评论0 收藏0
  • 前端项目修改默认滚动样式

    摘要:滚动条的背景滚动条的滑块样式修改这个算很齐全的修改下边这个很精简。值得一试这个的优点在于鼠标移上才会显示修改的滚动条体验很好提示下隐藏某轴的滚动条代码写法之前我以为是半天没变化 前端项目修改默认滚动条样式 写过挺多项目都需要改变滚动条的默认样式 并不想单独下载和引入插件 因此纯css修改默认滚动条的样式 这次算统一整理下方法,直接上代码。 &::-webkit...

    douzifly 评论0 收藏0
  • 前端项目修改默认滚动样式

    摘要:滚动条的背景滚动条的滑块样式修改这个算很齐全的修改下边这个很精简。值得一试这个的优点在于鼠标移上才会显示修改的滚动条体验很好提示下隐藏某轴的滚动条代码写法之前我以为是半天没变化 前端项目修改默认滚动条样式 写过挺多项目都需要改变滚动条的默认样式 并不想单独下载和引入插件 因此纯css修改默认滚动条的样式 这次算统一整理下方法,直接上代码。 &::-webkit...

    yearsj 评论0 收藏0
  • 移动端

    摘要:纯,隐藏滚动条,保留鼠标滚动效果。中弹性拉伸的现象解决禁用那个层或者的事件的默认行为禁用音视频自动播放这个是苹果官方明确提出的,为了用户的利益。所以的浏览器依然是死角,不能做到自动播放。 只是一个文档总结,纯粹是喜欢SF的Markdown。 HTML CSS X轴上采用百分比 字体大小以及部分不能用百分比衡量者,采用REM单位 JS 配置页面根font-size大小 (f...

    lowett 评论0 收藏0

发表评论

0条评论

wapeyang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<