JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

当我们需要对浏览器的滚动条进行自定义时，可以通过JavaScript来实现。下面是一些步骤来帮助您实现这一目标。

步骤1：创建滚动条

首先，我们需要创建一个具有自定义样式的滚动条。为此，我们可以创建一个 <div> 元素来模拟滚动条。在这个 <div> 元素中，我们需要设置样式来模拟浏览器中的滚动条。

.scrollbar {
  width: 10px;
  height: 100px;
  position: fixed;
  right: 0;
  top: 0;
  background-color: #ccc;
  border-radius: 20px;
}

在这里我们设置了一些样式来模拟滚动条。我们设置宽度为10px，高度为100px，位置为 fixed，右边距为0，顶部边距为0，背景颜色为灰色，边框半径为20px。您可以根据需要调整这些值。

步骤2：派生并设置滑块

接下来，我们需要创建一个滑块来允许用户拖动它以滚动内容。我们可以创建一个 <div> 元素来模拟这个滑块。在这个 <div> 元素中，我们需要设置样式来模拟滚动条中的滑块。

.scrollbar-thumb {
  width: 100%;
  height: 20px;
  background-color: #666;
  border-radius: 10px;
}

在这里，我们设置了一些样式来模拟滑块。我们设置宽度为100％，高度为20px，背景颜色为黑色，边角半径为10px。

步骤3：设置滚动行为

接下来，我们需要通过JavaScript来处理拖动滑块时的滚动行为。我们需要处理两个事件： mousedown 和 mousemove。在 mousedown 事件中，我们需要记录鼠标的位置以及滑块的位置。在 mousemove 事件中，我们需要计算鼠标的位置相对于滑块的位置，并使用这些值来计算滑块应该滚动的距离，并更新滑块的位置。

var scrollbar = document.querySelector('.scrollbar');
var thumb = document.querySelector('.scrollbar-thumb');
var isDragging = false;
var startMousePosition, startThumbPosition;

thumb.addEventListener('mousedown', function(event) {
  isDragging = true;
  startMousePosition = event.clientY;
  startThumbPosition = thumb.offsetTop;
});

document.addEventListener('mousemove', function(event) {
  if (isDragging) {
    var mouseDistance = event.clientY - startMousePosition;
    var thumbPosition = startThumbPosition + mouseDistance;
    var scrollbarHeight = scrollbar.offsetHeight - thumb.offsetHeight;
    var thumbPercent = thumbPosition / scrollbarHeight;
    window.scrollTo(0, (document.body.scrollHeight - window.innerHeight) * thumbPercent);
    thumb.style.top = thumbPosition + 'px';
  }
});

document.addEventListener('mouseup', function() {
  isDragging = false;
});

在这里，我们首先获取滚动条和滑块的元素，并创建一个变量 isDragging 以记录当前是否正在拖动滑块。然后，我们在滑块的 mousedown 事件上开始记录鼠标的位置和起始滑块的位置。在 mousemove 事件中，我们计算鼠标的距离以及新的滑块位置，并使用这些值来计算滑块应该滚动的距离，并更新滑块的位置。最后，我们在 mouseup 事件中停止拖动操作。

现在，我们已经创建了一个自定义的滚动条，并通过JavaScript来处理拖动滑块时的滚动行为，这个滚动条可以在多个浏览器中使用。

示例1：自定义滚动条样式

假设我们要将滚动条样式设置为红色，我们只需要更改 CSS 样式即可。

.scrollbar {
  width: 10px;
  height: 100px;
  position: fixed;
  right: 0;
  top: 0;
  background-color: #f00;
  border-radius: 20px;
}

.scrollbar-thumb {
  width: 100%;
  height: 20px;
  background-color: #fff;
  border-radius: 10px;
}

也可以按需修改其他的样式属性。

示例2：隐藏浏览器自带滚动条

当我们使用自定义滚动条时，我们可能需要隐藏浏览器默认的滚动条。这可以通过 CSS 样式来实现。

body {
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

body::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

这里我们设置 overflow-y 属性为滚动，以显示自定义滚动条。然后，我们使用 scrollbar-width 和 -ms-overflow-style 属性来隐藏 Firefox 和 Internet Explorer 中的默认滚动条，使用 ::-webkit-scrollbar 伪元素来隐藏 Safari 和 Chrome 中的默认滚动条。