如何阻止点击按钮时滚动至轮播Div，仅实现图片滑动切换

问题核心：使用锚点#id切换轮播图时，浏览器会自动滚动到对应元素位置，需要仅保留图片滑动切换效果，禁止页面滚动。

核心思路 #

放弃直接用锚点链接触发切换，改为通过事件绑定手动控制轮播项的显示/滑动，同时阻止浏览器默认的锚点滚动行为。

解决方案示例（React + Tailwind/DaisyUI） #

首先是你的轮播图基础代码：

<div className="carousel carousel-center max-w-md md:max-w-screen-2xl mx-auto space-x-24">
  <div id="item1" className="carousel-item">
    <img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image1" />
  </div> 
  <div id="item2" className="carousel-item">
    <img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image2" />
  </div> 
  <div id="item3" className="carousel-item">
    <img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image3" />
  </div> 
</div>

方法1：手动控制轮播项显隐（带滑动动画）

// 定义切换函数
const handleSwitchSlide = (e, targetId) => {
  // 阻止锚点默认滚动行为
  e.preventDefault();
  
  // 移除所有轮播项的激活状态
  document.querySelectorAll('.carousel-item').forEach(item => {
    item.classList.remove('opacity-100', 'translate-x-0');
    item.classList.add('opacity-0', 'translate-x-full');
  });
  
  // 激活目标轮播项并添加滑动动画
  const targetItem = document.getElementById(targetId);
  targetItem.classList.remove('opacity-0', 'translate-x-full');
  targetItem.classList.add('opacity-100', 'translate-x-0', 'transition-all', 'duration-500');
};

// 按钮渲染
<div className="flex gap-3 mt-4">
  <a href="#item1" onClick={(e) => handleSwitchSlide(e, 'item1')} className="btn">切换到图1</a>
  <a href="#item2" onClick={(e) => handleSwitchSlide(e, 'item2')} className="btn">切换到图2</a>
  <a href="#item3" onClick={(e) => handleSwitchSlide(e, 'item3')} className="btn">切换到图3</a>
</div>

方法2：基于滚动的平滑切换（适配横向滚动轮播）

如果你的轮播是横向滚动布局，直接控制容器滚动实现滑动效果：

import { useRef } from 'react';

const Carousel = () => {
  const carouselRef = useRef(null);
  
  const switchToSlide = (slideIndex) => {
    if (!carouselRef.current) return;
    // 计算目标滚动位置，实现平滑滑动
    carouselRef.current.scrollTo({
      left: slideIndex * carouselRef.current.offsetWidth,
      behavior: 'smooth'
    });
  };
  
  return (
    <>
      <div 
        ref={carouselRef} 
        className="carousel carousel-center max-w-md md:max-w-screen-2xl mx-auto space-x-24 overflow-x-auto scroll-smooth scrollbar-hide"
      >
        <div className="carousel-item w-full">
          <img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image1" />
        </div> 
        <div className="carousel-item w-full">
          <img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image2" />
        </div> 
        <div className="carousel-item w-full">
          <img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image3" />
        </div> 
      </div>
      
      <div className="flex gap-2 mt-4">
        <button onClick={() => switchToSlide(0)} className="btn">图1</button>
        <button onClick={() => switchToSlide(1)} className="btn">图2</button>
        <button onClick={() => switchToSlide(2)} className="btn">图3</button>
      </div>
    </>
  );
};

关键注意事项 #

• 不要直接使用不带阻止默认行为的锚点链接，否则浏览器必然触发滚动
• 使用transition-all或scroll-behavior: smooth实现平滑滑动效果
• 如果使用组件库（如DaisyUI），优先调用其内置的轮播API，避免手动操作DOM

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