css 使选定的元素停留在一个地方，同时滚动在一个旋转木马一样的设置相邻的元素

zdwk9cvp 于 11个月前发布在其他

关注(0)|答案(2)|浏览(119)

我想做一个灯箱，
我有一个缩略图轮播在底部的图像，你点击改变显示的图像。我想让它，当你点击任何缩略图，它滚动到页面的中心，使它看起来像选定的元素仍然不断在屏幕的中心。
到目前为止，我所做的是向ThumbnailViewer容器添加了一个动态左填充。

const ThumbnailViewer = (props) => {
const {
    images = [],
    currentImage = 0,
    thumbnailWidth
} = useContext(LightboxContext);

const getThumbnailViewerPaddingLeft = () => {
    if (thumbnailWidth) {
        return `calc(95vw - ${(thumbnailWidth * (currentImage + 1))}px)`
    }

}
const getThumbnailViewerPaddingRight = () => {
    if (thumbnailWidth) {
        return `calc(95vw - ${thumbnailWidth}px)`
    }

}

return (
    <div className={styles.thumbnailViewer} style={{ paddingLeft: getThumbnailViewerPaddingLeft() }}>
        {images.map((el, i) => <ThumbnailIcon img={el.src} alt={el.alt} selected={i == currentImage} current={i} />)}
    </div>
)

字符串
}
我无法让它居中，正如你在下面的GIF中看到的，我不确定这种方法是否正确。我想动态地减少左填充，然后不断地添加右填充，这样当点击最右边的元素时，它也会到达中心。

的数据
有人能帮助我，如果我在正确的道路上，或者有一个更好的方法来做到这一点？

css

来源：https://stackoverflow.com/questions/77738321/make-selected-element-stay-at-one-place-while-scrolling-the-neighbouring-element

2条答案

按热度按时间

lxkprmvk1#

实现这一点的最佳方法是拥有这样的布局，并在每次单击时更新transform属性。
这样做将是高效的，因为组件将不必须重新呈现。您可以使用refs来更新DOM. Checkout（refs和forwardRefs）。

const imgCnt = document.querySelector(".imgcnt");
const thumbsCnt = document.querySelector(".thumbs");
const thumbs = document.querySelectorAll(".thumb");
thumbs.forEach((thumb, index) => {
  thumb.addEventListener("click", () => {
    imgCnt.children[0].src = thumb.src;
    thumbsCnt.style.transform = `translateX(calc(50% - (${index} * (10vh + 10px)) - 5vh))`;
  });
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

.main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 5vh 5vw;
  align-items: center;
  background: beige;
  gap: 5vh;
}

.imgcnt {
  display: flex;
  justify-content: center;
  height: 70vh;
  width: 100%;
}

.imgcnt img {
  height: 100%;
}

.thumbs {
  height: 15vh;
  transform: translateX(calc(50% - 5vh));
  display: flex;
  gap: 10px;
}

.thumb {
  background: teal;
  width: 10vh;
  height: 100%;
  object-fit: fill;
}

<div class="main">
  <div class="imgcnt">
     <img src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=600" />
  </div>
  <div class="thumbs">
    <img class="thumb" src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=600" />
    <img class="thumb" src="https://images.pexels.com/photos/1386604/pexels-photo-1386604.jpeg?auto=compress&cs=tinysrgb&w=600" />
    <img class="thumb" src="https://images.pexels.com/photos/757889/pexels-photo-757889.jpeg?auto=compress&cs=tinysrgb&w=600" />
    <img class="thumb" src="https://images.pexels.com/photos/1181181/pexels-photo-1181181.jpeg?auto=compress&cs=tinysrgb&w=600" />
    <img class="thumb" src="https://images.pexels.com/photos/919278/pexels-photo-919278.jpeg?auto=compress&cs=tinysrgb&w=600" />
    <img class="thumb" src="https://images.pexels.com/photos/1386604/pexels-photo-1386604.jpeg?auto=compress&cs=tinysrgb&w=600" />
    <img class="thumb" src="https://images.pexels.com/photos/1321909/pexels-photo-1321909.jpeg?auto=compress&cs=tinysrgb&w=600" />
    <img class="thumb" src="https://images.pexels.com/photos/1181181/pexels-photo-1181181.jpeg?auto=compress&cs=tinysrgb&w=600" />
    <img class="thumb" src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=600" />
    <img class="thumb" src="https://images.pexels.com/photos/1366630/pexels-photo-1366630.jpeg?auto=compress&cs=tinysrgb&w=600" />
  </div>
</div>

赞(0）回复(0）举报 11个月前

iovurdzv2#

依靠缩略图宽度和调整填充可能不是最有效的方法。更有效的方法是利用图像的数组索引。当用户单击缩略图时，您可以将该缩略图重新定位到数组的中间。这样，如果您希望用户在单击左侧或右侧缩略图时始终保持居中，您可以简单地相应地修改数组。此方法提供了更动态和响应更快的用户体验

赞(0）回复(0）举报 11个月前