如何合理隐藏滚动条

Lik1024

于 2022-01-14 16:26:13 发布

阅读量357

点赞数

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/github_39365750/article/details/122497178

版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种CSS样式技巧，用于隐藏网页中元素的滚动条，同时保持内容的可滚动性。通过使用特定的CSS属性，如`overflow-x`、`-ms-scroll-chaining`等，可以在不同浏览器环境下实现一致的效果，包括IE和火狐浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.no-scrollbar {
  /* 横向溢出隐藏 */
  overflow-x: hidden;
  -ms-scroll-chaining: chained;
  /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
  -ms-overflow-style: none;
  -ms-content-zooming: zoom;
  -ms-scroll-rails: none;
  -ms-content-zoom-limit-min: 100%;
  -ms-content-zoom-limit-max: 500%;
  -ms-scroll-snap-type: proximity;
  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
  /*火狐下隐藏滚动条*/
  scrollbar-width: none;
  &::-webkit-scrollbar,
  ::-webkit-scrollbar {
    width: 0;
    /* 保证内部元素需要横向滚动的内容可以看到滚动条 */
    height: 10px;
  }
  &::-webkit-scrollbar-thumb,
  ::-webkit-scrollbar-thumb {
  	/* 滚动条里面可以拖动的按钮 */
    background-color: #ddd;
  }
}