如何合理隐藏滚动条

最新推荐文章于 2024-03-19 14:17:47 发布

原创最新推荐文章于 2024-03-19 14:17:47 发布 · 376 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

CSS 专栏收录该内容

2 篇文章

订阅专栏

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

.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;
  }
}