JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴

下面我将详细讲解如何实现“JavaScript 轮播图和自定义滚动条配合鼠标滚轮”的效果。

准备工作

在开始编写代码之前，我们需要准备以下工作：

HTML 结构：轮播图和滚动条需要放在 HTML 中，并有正确的类名和 ID。
CSS 样式：为轮播图和滚动条提供基础样式，并为鼠标滚轮事件提供支持。
JavaScript 代码：实现轮播图和滚动条的逻辑，并添加鼠标滚轮事件的监听器。

在这里，我们假设已经完成了以上准备工作，现在开始编写 JavaScript 代码。

实现轮播图和滚动条

首先，我们需要定义一个轮播图对象和一个滚动条对象。

const carousel = {
  // 定义轮播图对象
  // ...
};

const scrollbar = {
  // 定义滚动条对象
  // ...
};

轮播图和滚动条的具体实现可以根据需要进行编写。这里我们使用了一些已有的代码库来快速实现。

我们假设轮播图对象的 HTML 结构如下所示：

<div class="carousel">
  <div class="carousel-items">
    <div class="carousel-item">
      <img src="img1.jpg">
    </div>
    <div class="carousel-item">
      <img src="img2.jpg">
    </div>
    <div class="carousel-item">
      <img src="img3.jpg">
    </div>
  </div>
</div>

滚动条对象的 HTML 结构如下所示：

<div class="scrollbar">
  <div class="thumb"></div>
</div>

其中，.carousel 和 .scrollbar 分别表示轮播图和滚动条的容器，.carousel-items 表示轮播图中的图片列表，.carousel-item 表示单个图片，.scrollbar 表示滚动条容器，而 .thumb 则是滚动条的拖动块。

添加滚轮事件

接下来，我们需要为页面添加鼠标滚轮事件的监听器。具体代码如下：

function handleWheelEvent(event) {
  // 判断滚动条是否在滚动时被禁用
  if (!scrollbar.enabled) {
    return;
  }

  // 判断哪个对象是滚动的目标
  const target = event.target.closest('.carousel, .scrollbar');
  if (target === null) {
    return;
  }

  // 阻止默认滚动事件
  event.preventDefault();

  // 根据滚动方向计算相应的偏移量
  const delta = event.deltaY || event.detail || event.wheelDelta;
  const direction = delta > 0 ? 1 : -1;
  const offset = direction * scrollbar.step;

  // 如果鼠标滚动事件发生在滚动条上，则让滚动条滚动
  if (target.classList.contains('scrollbar')) {
    scrollbar.scrollBy(offset);
  }

  // 如果鼠标滚动事件发生在轮播图上，则让轮播图滚动
  if (target.classList.contains('carousel')) {
    carousel.scrollBy(offset);
  }
}

document.addEventListener('wheel', handleWheelEvent, { passive: false });

在上面的代码中，我们定义了一个 handleWheelEvent 函数，并将其添加到页面的 wheel 事件监听器中。当用户滚动鼠标滚轮时，这个函数会被触发。

在这个函数中，我们首先判断了目标对象是否是轮播图或滚动条。如果不是，就直接返回。然后我们阻止了默认的滚动事件，并根据滚动方向计算了相应的偏移量。

最后，我们根据滚动事件发生的对象，调用对应的滚动方法，让它们进行滚动。

禁用滚动条滚动

在上面的代码中，我们通过判断 scrollbar.enable 的值，来决定是否禁用滚动条的滚动。

我们可以使用以下代码来禁用滚动条的滚动：

scrollbar.enabled = false;

当需要启用滚动条的滚动时，只需要将 scrollbar.enabled 的值设置为 true 即可。

实例

下面，我们来看两个具体的示例。

示例一：自定义轮播图

在这个示例中，我们使用了一个名为 Swiper 的轮播图插件。这个插件提供了许多丰富的配置项，让我们可以自定义轮播图的外观和行为。

下面是示例代码：

const mySwiper = new Swiper('.carousel', {
  autoplay: false,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

const scrollbar = {
  element: document.querySelector('.scrollbar'),
  thumb: document.querySelector('.thumb'),
  enabled: true,
  maxOffset: 0,
  step: 10, // 每次滚动的距离
  scrollBy(offset) {
    const oldOffset = parseInt(this.thumb.style.top) || 0;
    const newOffset = Math.max(0, Math.min(this.maxOffset, oldOffset + offset));
    this.thumb.style.top = `${newOffset}px`;
    const ratio = newOffset / this.maxOffset;
    mySwiper.slideTo(Math.floor(ratio * (mySwiper.slides.length - 1)));
  },
  update() {
    const height = this.element.clientHeight;
    const thumbHeight = Math.max(30, Math.round((height / mySwiper.slides.length) * 1.2));
    this.thumb.style.height = `${thumbHeight}px`;
    this.maxOffset = height - thumbHeight;
  },
};

mySwiper.on('init', () => {
  scrollbar.update();
});

mySwiper.on('slideChange', () => {
  const ratio = mySwiper.realIndex / (mySwiper.slides.length - 1);
  const offset = Math.round(ratio * scrollbar.maxOffset);
  scrollbar.thumb.style.top = `${offset}px`;
});

document.addEventListener('wheel', handleWheelEvent, { passive: false });

在这个示例中，我们首先创建了一个 Swiper 对象，来实现轮播图的滑动效果。然后，我们定义了一个滚动条对象，并在 init 和 slideChange 事件中更新滚动条的位置。最后，我们使用 handleWheelEvent 函数监听了鼠标滚动事件。

示例二：自定义滚动条

在这个示例中，我们没有使用任何第三方插件，而是使用原生 JavaScript 实现了自定义的滚动条。这个滚动条可以用于任何需要滚动的元素，只需要将 HTML 结构和 JavaScript 代码进行相应的调整即可。

下面是示例代码：

<div class="scrollable">
  <div class="content">
    <p>这里是一大段内容，需要使用滚动条来进行查看。</p>
    <p>这里是一大段内容，需要使用滚动条来进行查看。</p>
    <p>这里是一大段内容，需要使用滚动条来进行查看。</p>
    <p>这里是一大段内容，需要使用滚动条来进行查看。</p>
    <p>这里是一大段内容，需要使用滚动条来进行查看。</p>
    <p>这里是一大段内容，需要使用滚动条来进行查看。</p>
    <p>这里是一大段内容，需要使用滚动条来进行查看。</p>
  </div>
  <div class="scrollbar">
    <div class="thumb"></div>
  </div>
</div>

const scrollable = document.querySelector('.scrollable');
const content = document.querySelector('.scrollable .content');
const scrollbar = {
  element: document.querySelector('.scrollable .scrollbar'),
  thumb: document.querySelector('.scrollable .thumb'),
  enabled: true,
  maxOffset: 0,
  step: 50, // 每次滚动的距离
  scrollBy(offset) {
    const oldOffset = content.scrollTop;
    const newOffset = Math.max(0, Math.min(this.maxOffset, oldOffset + offset));
    content.scrollTop = newOffset;
    const ratio = newOffset / this.maxOffset;
    this.thumb.style.top = `${ratio * 100}%`;
  },
  update() {
    const height = scrollable.clientHeight;
    const contentHeight = content.scrollHeight;
    const thumbHeight = Math.max(30, Math.round((height / contentHeight) * height));
    this.thumb.style.height = `${thumbHeight}px`;
    this.maxOffset = contentHeight - height;
  },
};

scrollable.addEventListener('scroll', () => {
  const ratio = content.scrollTop / scrollbar.maxOffset;
  scrollbar.thumb.style.top = `${ratio * 100}%`;
});

scrollbar.thumb.addEventListener('mousedown', (event) => {
  event.preventDefault();
  document.addEventListener('mousemove', handleThumbMove);
  document.addEventListener('mouseup', handleThumbUp);
});

function handleThumbMove(event) {
  event.preventDefault();
  const rect = scrollbar.thumb.getBoundingClientRect();
  const offsetY = event.clientY - rect.top - scrollbar.thumb.clientHeight / 2;
  const ratio = offsetY / (scrollbar.element.clientHeight - scrollbar.thumb.clientHeight);
  const newOffset = scrollbar.maxOffset * ratio;
  scrollbar.scrollBy(newOffset - content.scrollTop);
}

function handleThumbUp(event) {
  event.preventDefault();
  document.removeEventListener('mousemove', handleThumbMove);
  document.removeEventListener('mouseup', handleThumbUp);
}

scrollable.addEventListener('wheel', handleWheelEvent, { passive: false });

在这个示例中，我们首先定义了一个 .scrollable 的容器，在其中包含了一个 .content 的元素用来显示内容，以及一个 .scrollbar 的元素用来显示滚动条。然后，我们定义了一个滚动条对象，并实现了滚动条的拖动功能。最后，我们使用 handleWheelEvent 函数监听了鼠标滚动事件。