我正在尝试构建一个简单的“主要是 css”图像轮播，它使用滚动捕捉，但也有导航按钮来控制当前查看的幻灯片。我找到的唯一解决方案是在目标元素上使用scrollIntoView()，它可以满足我的要求，但它也总是将目标元素滚动到页面顶部。我希望目标轮播幻灯片和容器保持在原来的位置，并且我只希望幻灯片水平滚动到视图中。我正在看 Adam Argyle 的一个示例，他就是这样做的，并且容器保持在原来的位置，我不知道他的演示有什么不同。
我做了一个codepen来演示。
https://codepen.io/krjo-the-decoder/pen/dyjPrLy
单击底部的编号按钮将正确滚动到右侧幻灯片，同时也会将整个容器在页面上滚动。
我尝试在scrollIntoView()之前和之后使用scrollTo()将容器的y轴滚动设置为其现有位置，但这没有效果。
Scroll-snap Carousel
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1
926
收藏
尝试将
block: 'nearest'添加到你的scrollIntoView选项中，如下所示：document.querySelectorAll('button').forEach(button => { button.addEventListener('click', event => { console.log('event',event); slides[event.target.dataset.index].scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest', }); }); });