2行代码纯css快速去除浏览器竖向滚动条(干货)

说明

最近在开发一个项目时,觉得滚动条的存在影响视觉效果,所以查阅了一些资料,并记录下来,方案兼容主流浏览器

  • 举例:https://proj.warmday.wang/rainyday/index.html

一、Chromium内核(Blink内核)

代表浏览器:Chrome浏览器、Edge浏览器、360极速浏览器、百度浏览器...(国产大多数都是)

::-webkit-scrollbar {
    display:none
}

二、Gecko内核

代表浏览器:Firefox浏览器

html {
    scrollbar-width: none;
}

总结

  • 实际测试的浏览器有:360极速浏览器、Chrome浏览器、Edge浏览器、115浏览器、Firefox浏览器、Safari浏览器
  • 测试结果:只有Safari浏览器不支持,不过由于Safari浏览器优化的比较好,半透明的滚动条,并且会自动隐藏,完全不影响美观,所以可以忽略。

你可能感兴趣的:(2行代码纯css快速去除浏览器竖向滚动条(干货))