英文:
Move scrollbar in the opposite direction
问题
我有一个叠加的div，在我滚动时它按预期工作，但我打算改变滚动条的移动方式。因此，当我将内容向右移动时，滚动条应该向左移动（而不是默认的行为）。我该如何实现这个目标？
英文:
I have an overlay div that when I scroll it works as expected, but I intend to change the scroll bar movement. So when I move the content to the right, the scroll bar should move to the left (and not with the default behaviour). How can I achieve this?
答案1
得分: 0
为了实现自定义滚动条行为，使其与内容滚动的方向相反，您可以使用JavaScript来监听滚动事件并相应地更新滚动条的位置。以下是您可以实现此目标的示例：
HTML：
<div id="overlay">
<!-- 内容 -->
</div>
JavaScript：
const overlay = document.getElementById('overlay');
overlay.addEventListener('scroll', function() {
// 计算滚动条位置的百分比
const maxScrollLeft = overlay.scrollWidth - overlay.clientWidth;
const scrollPercentage = (overlay.scrollLeft / maxScrollLeft) * 100;
// 计算相反方向的新滚动条位置
const newScrollLeft = (100 - scrollPercentage) * maxScrollLeft / 100;
// 更新滚动条位置
overlay.scrollLeft = newScrollLeft;
});
在此示例中，我们监听了覆盖元素上的滚动事件。当用户滚动时，我们通过将当前的滚动左值除以最大的滚动左值来计算滚动条位置的百分比。然后，我们通过从100中减去滚动百分比并将其乘以最大滚动左值除以100来计算相反方向的新滚动左值。最后，通过将覆盖元素的scrollLeft属性设置为新的滚动左值来更新滚动条位置。
英文:
To achieve a custom scrollbar behavior where it moves in the opposite direction of the content scroll, you can use JavaScript to listen for scroll events and update the scrollbar position accordingly. Here's an example of how you can accomplish this:
HTML:
<div id="overlay">
<!-- Content -->
</div>
JavaScript:
const overlay = document.getElementById('overlay');
overlay.addEventListener('scroll', function() {
// Calculate the scrollbar position as a percentage
const maxScrollLeft = overlay.scrollWidth - overlay.clientWidth;
const scrollPercentage = (overlay.scrollLeft / maxScrollLeft) * 100;
// Calculate the new scrollbar position in the opposite direction
const newScrollLeft = (100 - scrollPercentage) * maxScrollLeft / 100;
// Update the scrollbar position
overlay.scrollLeft = newScrollLeft;
});
In this example, we listen for the scroll event on the overlay element. When the user scrolls, we calculate the scrollbar position as a percentage by dividing the current scroll left value by the maximum scroll left value. Then we calculate the new scroll left value in the opposite direction by subtracting the scroll percentage from 100 and multiplying it by the maximum scroll left value divided by 100. Finally, we update the scrollbar position by setting the scrollLeft property of the overlay element to the new scroll left value.
答案2
得分: 0
我建议查看Aditya Taparia在geeksforgeeks.org上的这篇文章，他逐步向您介绍如何使用纯CSS进行操作：https://www.geeksforgeeks.org/how-to-change-the-position-of-scrollbar-using-css/
英文:
I'd recommend looking at this article on geeksforgeeks.org by Aditya Taparia, where he walks you through how to do it using plain CSS step-by-step: https://www.geeksforgeeks.org/how-to-change-the-position-of-scrollbar-using-css/
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论