Javascript JS：滚动到不移动元素

我正在用vanilla JS构建一个旋转木马，我有两个箭头（指针），其中我使用事件委托，并且在父节点上有一个侦听器。我正在检查目标类是否包含

left

或

right

，然后适当地处理它。我正在使用

carousel images

元素，该元素将所有图像以一定宽度并排放置，并使用

overflow:hidden

隐藏它们。根据我单击的箭头，我抓取

旋转图像

元素，使用

向左滚动

并减去/添加子图像的clientWidth。我有一段时间前它的工作，但现在似乎没有任何影响，我不知道我错在哪里了

html

css

---

将“.carousel images”选择器的样式更改为以下样式：

.carousel-images {
    display: flex;
    width: 100%;
    overflow-x: scroll;
}

---

“溢出-x:scroll；”这是必要的。“width”属性可以更改，但它必须小于其“.carousel image”子项的组合宽度，才能进行滚动（否则不需要滚动，内容将被隐藏）。

将“.carousel images”选择器的样式更改为以下内容：

.carousel-images {
    display: flex;
    width: 100%;
    overflow-x: scroll;
}

---

“溢出-x:scroll；”这是必要的。“width”属性可以更改，但它必须小于其“.carousel image”子项的组合宽度，以便滚动工作（否则不需要滚动，内容只是隐藏）。

它不工作的原因是

let carouselImagesContainer = document.querySelector('.carousel-images');

应该是

let carouselImagesContainer = document.querySelector('.carousel-container');

您得到的是.carousel图像，而不是.carousel容器

由于格式不正确，您还需要更改以下内容：

    <span class="left">
      <
    </span>
    <span class="right">
      >
    </span>

<
>

致：

---

它不起作用的原因是

let carouselImagesContainer = document.querySelector('.carousel-images');

应该是

let carouselImagesContainer = document.querySelector('.carousel-container');

您得到的是.carousel图像，而不是.carousel容器

由于格式不正确，您还需要更改以下内容：

    <span class="left">
      <
    </span>
    <span class="right">
      >
    </span>

<
>

致：

试试这个

.carousel-images {
 display: flex;
 width: 100%;
 overflow: hidden;
}
img{
 width:100%
 }
.carousel-image {
 flex: 0 0 100%;
 background: green;
 height: 100vh;
 padding: 20px;
}

试试这个

.carousel-images {
 display: flex;
 width: 100%;
 overflow: hidden;
}
img{
 width:100%
 }
.carousel-image {
 flex: 0 0 100%;
 background: green;
 height: 100vh;
 padding: 20px;
}

---

嗯，行得通，谢谢。。。。我不明白为什么我会在上面“滚动”，因为

.carousel images

是宽度为1000px的元素，而不是

.carousel container

。这是因为css中有溢出：隐藏。请参阅：关于溢出的部分：）感谢您的帮助，谢谢@johnhmm的帮助，谢谢您。。。。我不明白为什么我会在上面“滚动”，因为

.carousel images

是宽度为1000px的元素，而不是

.carousel container

。这是因为css中有溢出：隐藏。请看：关于溢出的部分：）感谢您的帮助，谢谢@john