删除默认的浏览器滚动条并添加具有透明背景的新滚动条

问题描述 投票：0回答：1

请帮忙！

我正在使用 WordPress 在我的网站上工作，需要添加自定义滚动条并增加悬停时的拇指宽度，如下例所示：bit.ly/3IPxa1X。 但我无法实现，因为滚动条宽度已经设置为 10px，当我使滚动条透明时，我得到一个白色背景。

所以在我检查网站后，我认为他们没有自定义默认浏览器滚动条。相反，他们在页面内添加了一个新的滚动条，这样滚动条就可以是透明的，并且可以控制鼠标悬停时的拇指宽度。

我确实请 ChatGPT 帮我解决问题，但它给了我这段代码，但效果不佳：

// Get scrollbar and content elements
const customScrollbar = document.getElementById('custom-scrollbar');
const content = document.getElementById('content');

// Calculate scrollbar thumb height based on content height
const scrollbarHeight = customScrollbar.clientHeight;
const contentHeight = content.scrollHeight;
const thumbHeight = scrollbarHeight * (scrollbarHeight / contentHeight);

// Set scrollbar thumb height
document.getElementById('scrollbar-thumb').style.height = thumbHeight + 'px';

// Add event listener to update thumb position on scroll
content.addEventListener('scroll', () => {
  const scrollTop = content.scrollTop;
  const thumbTop = scrollTop * (scrollbarHeight / contentHeight);
  document.getElementById('scrollbar-thumb').style.top = thumbTop + 'px';
});
/* Hide default browser scrollbar */
body {
  overflow: hidden;
}

/* Style custom scrollbar */
#custom-scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 10px;
  background-color: #f5f5f5;
  z-index: 9999;
}

#scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #888;
  border-radius: 5px;
  transition: width 0.2s ease-in-out;
}

/* Style scrollbar thumb on hover */
#scrollbar-thumb:hover {
  width: 12px;
}
<body>
  <aside id="custom-scrollbar">
    <div id="scrollbar-thumb"></div>
  </aside>
  <div id="content">
    <!-- your website content here -->
  </div>
</body>

ChatGPT 说明：

首先，我们添加一个 id 为“custom-scrollbar”的标签来创建我们的自定义滚动条。我们还添加了一个 id 为“scrollbar-thumb”的对象来表示滚动条缩略图。

在 CSS 代码中，我们通过将 body 元素的“overflow”属性设置为“hidden”来隐藏默认的浏览器滚动条。然后，我们通过将其位置设置为“固定”、将其高度设置为“100%”以及将其宽度设置为“10px”来设置自定义滚动条的样式。我们还给它设置了“#f5f5f5”的背景色和 9999 的 z-index 以确保它出现在其他元素之上。

接下来，我们通过将滚动条的位置设置为“绝对”，将其顶部和左侧位置设置为“0”，将其宽度设置为“100%”，并将其背景颜色设置为“#888”来设置滚动条拇指的样式。我们还为 width 属性赋予了 5px 的 border-radius 和 0.2s ease-in-out 的过渡效果，以创建平滑的悬停效果。然后我们添加一个 :hover 伪类，当用户将鼠标悬停在它上面时，将滚动条拇指的宽度增加到 12px。

在 JavaScript 代码中，我们首先使用各自的 id 获取自定义滚动条和内容元素。然后，我们分别使用 clientHeight 和 scrollHeight 属性，根据自定义滚动条的高度和内容计算滚动条拇指高度。我们相应地设置滚动条滑块的高度。

然后我们向内容元素添加一个事件侦听器，以在用户滚动时更新滚动条拇指的位置。我们使用 scrollTop 属性获取当前滚动位置，使用滚动位置与内容高度的比率计算滚动条拇指的新位置，并更新顶部位置。

javascript html css wordpress scrollbar
1个回答
0
投票

在我的一个项目中，我想做同样的事情并用这段代码完成了它。这是示例代码：https://jsfiddle.net/Lxydem9n/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  display: block;
  width: 7px;
  border-radius: 20px;
}

::-webkit-scrollbar-track {
  background: transparent;
}
    
::-webkit-scrollbar-thumb {
  background-color: red;
  border-radius: 20px;
  border-right: none;
  border-left: none;
}

::-webkit-scrollbar-thumb:hover {
  background-color: red;
}

::-webkit-scrollbar-track-piece:end {
  background: transparent;
  margin-bottom: 5px; 
}

::-webkit-scrollbar-track-piece:start {
  background: transparent;
  margin-top: 5px;
}
<div style="height: 1000px; background-color: black"></div>

在此示例中，“::-webkit-scrollbar-thumb”是主滚动，您可以更改颜色边框，甚至可以在悬停时更改它，“::-webkit-scrollbar-track”是您可以更改的整个滚动部分想要透明。问题是在某些浏览器中这可能不起作用并且滚动部分的背景将不可见，在这种情况下，您可以更改它并放置主要部分或主体的颜色，甚至是图像。问题是在 JSFiddle 中：https://jsfiddle.net/Lxydem9n/ 滚动背景不是白色，但这里仍然显示白色。用你的自定义滚动条试试这个，让我知道这是否对你有帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.