如何防止 SimpleScrollbar 滚动条超出容器边界-html教程-PHP中文网

如何防止 SimpleScrollbar 滚动条超出容器边界

DDD

发布： 2025-08-26 17:24:28

原创

1002人浏览过

如何防止 simplescrollbar 滚动条超出容器边界

本文将指导你如何解决 SimpleScrollbar 滚动条超出容器边界的问题。SimpleScrollbar 是一个轻量级的 JavaScript 库，用于自定义滚动条样式。然而，在某些情况下，滚动条可能会超出其容器，导致视觉上的不美观。以下提供解决方案。

解决方案：使用 overflow: hidden;

解决此问题的最简单方法是在包含 SimpleScrollbar 的容器上应用 overflow: hidden; CSS 属性。这会有效地裁剪超出容器边界的任何内容，包括滚动条。

具体来说，你需要将 overflow: hidden; 添加到你的 .ss-container 样式中。

示例代码：

.ss-container {
  border: 1px solid purple;
  width: 150px;
  height: 300px;
  display: inline-block;
  overflow: hidden; /* 添加此行 */
}

登录后复制

通过添加 overflow: hidden;，滚动条将始终保持在容器内部，无论用户如何滚动。

超会AI

AI驱动的爆款内容制造机

查看详情

完整示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>SimpleScrollbar Example</title>
<script src="simple-scrollbar.min.js"></script>
<link rel="stylesheet" href="simple-scrollbar.css">
<style>
.ss-wrapper {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  float: left;
}

.ss-content {
  height: 100%;
  width: calc(100% + 18px);
  padding: 0 0 0 0;
  position: relative;
  overflow: auto;
  box-sizing: border-box;
}

.ss-content.rtl {
  width: calc(100% + 18px);
  right: auto;
}

.ss-scroll {
  position: relative;
  background: black;
  width: 9px;
  border-radius: 4px;
  top: 0;
  z-index: 2;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.25s linear;
}

.ss-hidden {

}

.ss-container:hover .ss-scroll,
.ss-container:active .ss-scroll {
  opacity: 1;
}

.ss-grabbed {
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.ss-container {
  border: 1px solid purple;
  width: 150px;
  height: 300px;
  display: inline-block;
  overflow: hidden; /* 添加此行 */
}
</style>
</head>
<body>
<div ss-container>
  <p style="padding: 5px 25px 5px 5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    SimpleScrollbar.initAll();
  });
</script>
</body>
</html>

登录后复制

注意事项：