css pour supprimer la barre de défilement-Questions et réponses frontales-php.cn

css pour supprimer la barre de défilement

PHPz

Libérer： 2023-05-27 09:10:07

original

977 Les gens l'ont consulté

Dans la conception Web, les barres de défilement sont l'un des éléments Web courants. Lors de la conception de certains sites Web, des barres de défilement personnalisées sont utilisées dans la page pour des besoins esthétiques ou de conception. Cependant, dans certains scénarios, nous devrons peut-être supprimer les barres de défilement, par exemple lors de l'affichage d'images ou de la lecture de contenu sur des appareils à petit écran. Ensuite, nous présenterons comment utiliser CSS pour supprimer les barres de défilement.

Avant de comprendre comment supprimer les barres de défilement, vous devez d'abord comprendre que le style des barres de défilement sur les pages Web est généralement rendu par le style par défaut du navigateur. Par conséquent, nous devons définir des styles dans une feuille de style CSS pour contrôler les barres de défilement rendues par le navigateur.

Masquer la barre de défilement

Nous pouvons utiliser l'attribut overflow pour masquer la barre de défilement. Tout d'abord, définissez overflow sur hidden pour masquer la barre de défilement verticale, tandis que la barre de défilement horizontale doit être définie sur overflow-x: Hidden; . overflow 属性隐藏滚动条。首先，将 overflow 设置为 hidden 即可隐藏垂直滚动条，而水平滚动条需要设置 overflow-x: hidden;。

body {
  overflow: hidden; /* 隐藏垂直滚动条 */
  overflow-x: hidden; /* 隐藏水平滚动条 */
}

Copier après la connexion

自定义滚动条样式

另外，如果需要添加一个自定义样式的滚动条，可以使用 ::-webkit-scrollbar 伪元素。该伪元素允许你控制滚动条的样式和外观。我们可以结合 ::-webkit-scrollbar-thumb 伪元素和 ::-webkit-scrollbar-track 伪元素实现自定义样式。

/* 自定义垂直滚动条 */
::-webkit-scrollbar {
  width: 12px; /* 设置滚动条宽度 */
}

::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 设置滚动条滑块颜色 */
}

::-webkit-scrollbar-track {
  background-color: #fff; /* 设置滚动轨道颜色 */
}

Copier après la connexion

利用 JavaScript 实现

在某些情况下，在 CSS 中设置样式并不能完全控制滚动条。比如在 iOS 中，由于 Safari 浏览器使用了自己的滚动条，通过 CSS 设置样式是无法实现控制的。因此，可以使用 JavaScript 实现自定义滚动条。

具体实现可以参考 [SimpleBar](https://github.com/Grsmto/simplebar) 库，该库可以实现类似 Mac OS 中滚动条的效果。在使用前需要导入 SimpleBar 库的 JavaScript 和 CSS 文件，然后在 HTML 中添加一个类名为 simplebar-content

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>使用 SimpleBar 实现自定义滚动条</title>
  <link rel="stylesheet" href="simplebar.css">
</head>

<body>
  <div class="simplebar-content">
    <!-- content goes here -->
  </div>

  <script src="simplebar.js"></script>
  <script>
    new SimpleBar(document.querySelector('.simplebar-content'));
  </script>
</body>

</html>

Copier après la connexion

::-webkit-scrollbar

::-webkit-scrollbar-thumb

::-webkit-scrollbar-track

simplebar-content

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!