防止 daisyUI 轮播在切换幻灯片时滚动

Question

我在 Nextjs 应用程序中使用带有来自 daisyUI 的指示按钮的轮播。

正如在他们的演示中可以观察到的，当单击指示器按钮时，除了切换幻灯片之外，页面还会滚动，使得幻灯片的顶部边框位于屏幕顶部。

有没有办法在防止滚动的同时使用该组件？

Answer 1

我想我已经弄清楚了这一点。这里的关键是要考虑轮播是一个具有水平滚动的元素。这意味着解决此问题的一种方法是使用 Javascript 函数手动替换水平滚动。

我不知道这是如何在 Next.js 中完成的，但想法是定义一个这样的函数：

let carouselElement = . . .; // carouselElement has to hold the HTMLElement of the carousel


function scrollCarousel(targetImageNumber) {
    let carouselWidth = carouselElement.clientWidth;

    // Images are numbered from 1 to 4 so thats why we substract 1
    let targetImage = targetImageNumber - 1;

    let targetXPixel = (carouselWidth * targetImage) + 1

    carouselElement.scrollTo(targetXPixel, 0);
}

然后，您可以<a>用<button>标签替换标签，并添加一个onClick在 Carousel HTML 元素上手动执行滚动的处理程序，如下所示：

<div class="flex justify-center w-full py-2 gap-2">
    <!-- You'll have to pass the number image to the function -->
    <button onClick={scrollCarousel(1)} class="btn btn-xs">1</button> 
    <button onClick={scrollCarousel(2)} class="btn btn-xs">2</button> 
    <button onClick={scrollCarousel(3)} class="btn btn-xs">3</button> 
    <button onClick={scrollCarousel(4)} class="btn btn-xs">4</button>
</div>

我用这里的解决方案构建了一个 Stackblitz 示例（抱歉，用 Svelte 语言）