在移动浏览器中使滚动条隐形

Question

我想隐藏滚动条，但不禁用滚动功能。

我在CSS中使用了以下样式规则：

::-webkit-scrollbar {
  display: none;
}

我还尝试过以下方法：

::-webkit-scrollbar {
  width: 0;
}

在电脑端，这些样式能够正确工作。但在手机端，无论使用的是Safari还是Chrome浏览器，这些样式都无法生效。

Eli Courtwright · Answer




  
    这个div的高度为1000px，您可以滚动且滚动条已被隐藏。

Theo · Answer

除了KnightTheLion的上述答案外，对于使用LESS的人而言，可以使用混入(mixins)来提高编写效率：

// LESS 媒体查询混入模板

@screen-phone: 767px;
@screen-tablet: 922px;
@screen-desktop: 1200px;

.media-phone(@rules) {
  @media screen and (max-width: @screen-phone) {
    @rules();
  }
}

.media-tablet(@rules) {
  @media screen and (min-width: (@screen-phone + 1px)) and (max-width: (@screen-desktop - 1px)) {
    @rules();
  }
}

.media-desktop(@rules) {
  @media screen and (min-width: @screen-desktop) {
    @rules();
  }
}

.media-custom-max(@width, @rules) {
  @media screen and (max-width: @width) {
    @rules();
  }
}

.media-custom-min(@width, @rules) {
  @media screen and (min-width: @width) {
    @rules();
  }
}

// gt=大于
.media-gt-phone(@rules) {
  @media (min-width: (@screen-phone + 1px)) {
    @rules();
  }
}

.media-gt-tablet(@rules) {
  @media (min-width: (@screen-tablet + 1px)) {
    @rules();
  }
}

以下是混入使用的示例：

body {
  .media-phone({
    scrollbar-width: none;
    -ms-overflow-style: none;
  });
}

body::-webkit-scrollbar {
  .media-phone({
    display: none;
  });
}

你可以随时添加更多混入并根据需要编辑现有混入，以适应更宽的屏幕尺寸或其他需求。