使用自定义滚动条模拟Chrome滚动条-禁用滚动条上的悬停事件-按钮

要实现一个自定义滚动条并禁用滚动条上的悬停事件，同时添加一个按钮来控制滚动条的行为，可以按照以下步骤进行：

基础概念

自定义滚动条：通过CSS和JavaScript来创建一个不同于浏览器默认样式的滚动条。
悬停事件：通常指的是鼠标悬停在某个元素上时触发的事件，如mouseenter或mouseover。
按钮控制：通过按钮点击事件来控制滚动条的行为。

类型与应用场景

类型：基于CSS的自定义滚动条和基于JavaScript的动态控制。
应用场景：适用于需要高度定制化UI的网站或应用，如内容管理系统、电商网站等。

示例代码

以下是一个简单的示例，展示了如何使用CSS和JavaScript来实现自定义滚动条，并禁用滚动条上的悬停事件，同时添加一个按钮来控制滚动条的行为。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Scrollbar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="scroll-container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
    </div>
    <button id="scrollButton">Scroll Down</button>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

/* 自定义滚动条样式 */
.scroll-container {
    width: 300px;
    height: 200px;
    overflow-y: scroll;
    border: 1px solid #ccc;
}

.scroll-container::-webkit-scrollbar {
    width: 10px;
}

.scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.scroll-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background: #555; /* 禁用悬停效果 */
}

JavaScript (script.js)

document.getElementById('scrollButton').addEventListener('click', function() {
    const container = document.querySelector('.scroll-container');
    container.scrollTop += 50; // 向下滚动50像素
});

解决问题的方法

禁用悬停事件：通过CSS选择器::-webkit-scrollbar-thumb:hover来设置悬停时的样式，使其保持不变，从而实现禁用悬停效果。
按钮控制滚动：使用JavaScript监听按钮的点击事件，并在事件处理函数中调整滚动容器的scrollTop属性来控制滚动行为。