如何阻止daisyUI轮播组件切换幻灯片时触发页面滚动？

这个问题的核心原因是daisyUI带指示器按钮的轮播组件默认使用**锚点链接（<a href="#slideX">）**触发幻灯片切换，而浏览器点击锚点时会自动滚动到对应id的元素顶部，这是浏览器的默认行为。你可以通过以下两种方式解决：

方法一：阻止锚点的默认滚动行为 #

保留原有的锚点按钮结构，通过JavaScript阻止浏览器的默认滚动动作，同时手动控制幻灯片的激活状态：

import { useEffect } from 'react';

export default function CustomCarousel() {
  useEffect(() => {
    // 获取所有轮播指示器按钮
    const indicatorButtons = document.querySelectorAll('.carousel-button');
    
    const handleButtonClick = (e) => {
      // 阻止浏览器默认的锚点滚动行为
      e.preventDefault();
      
      // 获取目标幻灯片的ID（去掉href开头的#）
      const targetSlideId = e.currentTarget.getAttribute('href').slice(1);
      
      // 切换幻灯片的显示状态
      document.querySelectorAll('.carousel-item').forEach(slide => {
        slide.classList.add('hidden');
      });
      document.getElementById(targetSlideId).classList.remove('hidden');
      
      // 同步更新指示器的激活样式
      indicatorButtons.forEach(btn => btn.classList.remove('btn-active'));
      e.currentTarget.classList.add('btn-active');
    };
    
    // 给每个按钮绑定点击事件
    indicatorButtons.forEach(btn => btn.addEventListener('click', handleButtonClick));
    
    // 组件卸载时清理事件监听
    return () => {
      indicatorButtons.forEach(btn => btn.removeEventListener('click', handleButtonClick));
    };
  }, []);

  return (
    <div className="carousel w-full">
      <div id="slide1" className="carousel-item w-full">
        <img src="https://picsum.photos/id/1/800/400" className="w-full" />
      </div>
      <div id="slide2" className="carousel-item w-full hidden">
        <img src="https://picsum.photos/id/2/800/400" className="w-full" />
      </div>
      <div id="slide3" className="carousel-item w-full hidden">
        <img src="https://picsum.photos/id/3/800/400" className="w-full" />
      </div>
      <div className="flex justify-center w-full py-2 gap-2">
        <a href="#slide1" className="carousel-button btn btn-xs btn-active">1</a>
        <a href="#slide2" className="carousel-button btn btn-xs">2</a>
        <a href="#slide3" className="carousel-button btn btn-xs">3</a>
      </div>
    </div>
  );
}

方法二：替换锚点为按钮，通过状态控制幻灯片 #

完全抛弃锚点机制，用React状态来管理当前激活的幻灯片，避免浏览器触发任何默认滚动：

import { useState } from 'react';

export default function StateControlledCarousel() {
  // 用状态跟踪当前激活的幻灯片ID
  const [activeSlide, setActiveSlide] = useState('slide1');

  return (
    <div className="carousel w-full">
      <div
        id="slide1"
        className={`carousel-item w-full ${activeSlide === 'slide1' ? '' : 'hidden'}`}
      >
        <img src="https://picsum.photos/id/1/800/400" className="w-full" />
      </div>
      <div
        id="slide2"
        className={`carousel-item w-full ${activeSlide === 'slide2' ? '' : 'hidden'}`}
      >
        <img src="https://picsum.photos/id/2/800/400" className="w-full" />
      </div>
      <div
        id="slide3"
        className={`carousel-item w-full ${activeSlide === 'slide3' ? '' : 'hidden'}`}
      >
        <img src="https://picsum.photos/id/3/800/400" className="w-full" />
      </div>
      <div className="flex justify-center w-full py-2 gap-2">
        <button
          onClick={() => setActiveSlide('slide1')}
          className={`btn btn-xs ${activeSlide === 'slide1' ? 'btn-active' : ''}`}
        >
          1
        </button>
        <button
          onClick={() => setActiveSlide('slide2')}
          className={`btn btn-xs ${activeSlide === 'slide2' ? 'btn-active' : ''}`}
        >
          2
        </button>
        <button
          onClick={() => setActiveSlide('slide3')}
          className={`btn btn-xs ${activeSlide === 'slide3' ? 'btn-active' : ''}`}
        >
          3
        </button>
      </div>
    </div>
  );
}

两种方法都能有效避免点击指示器时的自动滚动行为，方法二更符合React的状态管理逻辑，方法一则更贴近daisyUI的原始组件结构，可根据你的需求选择。

内容的提问来源于stack exchange，提问作者Winkelried