如何使用侧面滚动按钮专门滚动每 4 个 div？
在上一个问题中，我询问了如何循环和简化每个overflow-x中的多个侧面滚动按钮的代码：如何循环和简化在javascript中滚动特定行的多个侧面滚动按钮的代码？
现在，Elna Haim 回答了这个问题，我向任何精通 javascript 的人寻求帮助，了解如何在单击“下一个”和“后退”按钮时专门滚动每 4 个 div，并专门停止并适合其中的 4 个框。
它可以使用 data-scroll="1280" 进行滚动，但每次屏幕尺寸发生变化时，滚动也会被破坏，并且您将能够在下面的代码中看到 div 被切成两半。
代码片段中还有一个问题，边距没有触发，我不知道为什么。
const nextbtns = document.querySelectorAll('.next')
const backbtns = document.querySelectorAll('.back')
for (let nxt of nextbtns) {
nxt.addEventListener("click", () => {
const con = nxt.getAttribute("data-con");
const target = nxt.getAttribute("data-scroll");
document.querySelector(`#${con}`).scrollLeft += parseInt(target, 10);
});
}
for (let bck of backbtns) {
bck.addEventListener("click", () => {
const con = bck.getAttribute("data-con");
const target = bck.getAttribute("data-scroll");
document.querySelector(`#${con}`).scrollLeft -= parseInt(target, 10);
});
}
.row {
width: 100%;
height: 270px;
overflow-x: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
.container {
overflow-x: hidden;
white-space: nowrap;
-ms-overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth;
transition: scroll-behavior .5s ease-in-out;
}
.box {
width: 24%;
height: 180px;
background-color: #171717;
border-radius: 20px;
display: inline-block;
margin-right: 14;
}
.btns button {
--color: #202020;
background-color: #202020;
padding: 8px 17.5px 12px 17.5px;
border: 3px solid var(--color);
color: grey;
border-radius: 50px;
font-family: 'Arial Black';
position: relative;
bottom: 0px;
}
<html>
<body>
<div class="row">
<a class="btns">
<button type="button" class="back" data-con="con" data-scroll="1321">‹</button>
<button type="button" class="next" data-con="con" data-scroll="1321">›</button>
</a>
<div class="container" id="con">
<center>
<div class="box">
</div><div class="box">
</div><div class="box">
</div><div class="box">
</div><div class="box">
</div><div class="box">
</div><div class="box">
</div><div class="box">
</div>
</center>
</div>
</div>
</body>
</html>
const nextbtns = document.querySelectorAll('.next')
const backbtns = document.querySelectorAll('.back')
for (let nxt of nextbtns) {
nxt.addEventListener("click", () => {
const con = nxt.getAttribute("data-con");
const target = nxt.getAttribute("data-scroll");
document.querySelector(`#${con}`).scrollLeft += parseInt(target, 10);
});
}
for (let bck of backbtns) {
bck.addEventListener("click", () => {
const con = bck.getAttribute("data-con");
const target = bck.getAttribute("data-scroll");
document.querySelector(`#${con}`).scrollLeft -= parseInt(target, 10);
});
}对于 jsfiddle：https://jsfiddle.net/c0f9da82/ 边距仍然不起作用，我想只有在本地保存代码时它才会起作用。
非常感谢 Elna Haim 回答上一个问题，并希望再次回答这个问题！如果其他人可以帮助回答这个问题，将不胜感激！
我还有另一个问题：Anywhere around Good at both Javascript and Youtube api?，我正在使用 lite-youtube js，我在为 onStateChange 添加事件监听器时感到困惑，我在 github 上使用 lite youtube js by paulirish，并询问如何创建事件监听器来获取 onStateChange 结束参数。预先非常感谢您！致所有希望回答我的问题的人！
您可以用接下来的 4 张卡片替换可见的卡片，而不是滚动。我为每张卡片设置了不同的颜色，以便您可以看到它的实际效果。基本上，我将所有卡片存储在一个数组中，并根据按下的按钮一次附加 4 张卡片。
.row {
width: 100%;
height: 270px;
overflow-x: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
.container {
overflow-x: hidden;
white-space: nowrap;
-ms-overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth;
transition: scroll-behavior .5s ease-in-out;
}
.box {
width: 24%;
height: 180px;
background-color: #171717;
border-radius: 20px;
display: inline-block;
margin-right: 14;
}
.btns button {
--color: #202020;
background-color: #202020;
padding: 8px 17.5px 12px 17.5px;
border: 3px solid var(--color);
color: grey;
border-radius: 50px;
font-family: 'Arial Black';
position: relative;
bottom: 0px;
}<html>
<body>
<div class="row">
<a class="btns">
<button type="button" class="back" data-con="con" data-scroll="1321">‹</button>
<button type="button" class="next" data-con="con" data-scroll="1321">›</button>
</a>
<div class="container" id="con">
<center>
<div class="box">
</div><div class="box">
</div><div class="box">
</div><div class="box">
</div><div class="box">
</div><div class="box">
</div><div class="box">
</div><div class="box">
</div>
</center>
</div>
</div>
</body>
</html>