首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript 如何使用侧边滚动按钮具体滚动每4个格

如何使用侧边滚动按钮具体滚动每4个格？

在之前的一个问题上，我询问了如何循环和简化每次溢出中多个侧滚动按钮的代码-x:How to loop and simplify code of multiple side scrolling buttons that scrolls specific row in javascript?

现在，Elna Haim回答了这个问题，我向任何熟悉JavaScript的人寻求帮助，了解如何在单击"下一步"和"返回"按钮时特定地滚动每4个分区并特定地停止并将4个框放入其中.

它可以使用data-scroll="1280"滚动，但每次屏幕大小改变时，滚动也会被中断，并且您将能够在下面的代码中看到迪夫被切成两半.

Also there's a problem in the margin not triggering in the code snippet, I don't know why.

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">&#8249</button>
    <button type="button" class="next" data-con="con" data-scroll="1321">&#8250</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>

对于jsfiddle:https://jsfiddle.net/c0f9da82/ 余量仍然不起作用，我想只有在本地保存代码时它才会起作用.

感谢Elna Haim回答之前的问题，并希望再次回答这个问题！如果其他人可以帮助回答这个问题，我们将不胜感激！

我还有另一个问题:周围有人同时擅长JavaScript和Youtube api吗？，我正在使用lite-youtube js，我在为onStateChange添加事件监听器时感到困惑，我在github上使用pauliirish的Lite youtube js，并询问如何创建事件监听器来获取onStateChange结束参数.提前非常感谢！致所有想要回答我问题的人！

推荐答案

您可以用接下来的4张牌替换可见牌，而不是滚动.我为每张牌设置了不同的 colored颜色 ，以便您可以看到它的实际情况.基本上，我将所有牌存储在一个数组中，并根据按下的按钮一次添加4张牌.

const nextbtns = document.querySelectorAll('.next')
const backbtns = document.querySelectorAll('.back')
const boo = document.getElementsByClassName('box');
const cent = document.getElementById('con');
let tempr = [];
let a = 0;
let b = 4;

function nextFour() {
  [...boo].forEach((a) => a.remove());
  tempr.slice(a, b).forEach((a) => {
    if (typeof(a) == 'object') {
      cent.appendChild(a)
    }
  });
}


for (const i in boo) {
  tempr.push(boo[i]);
}

[...boo].forEach((a) => a.remove());
tempr.slice(a, b).forEach((a) => cent.appendChild(a));

for (let nxt of nextbtns) {
  nxt.addEventListener("click", () => {
    if (b >= tempr.length) return;
    a = a + 4;
    b = b + 4;
    nextFour()
  })
}

for (let bck of backbtns) {
  bck.addEventListener("click", () => {
    if (a <= 0) return;
    a = a - 4;
    b = b - 4;
    nextFour();
  })
}
.row {
  width: 100%;
  height: 270px;
  position: relative;
  left: 0;
  margin-top: 20px;
  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;
  position: relative;
  left: 20;
  right: 10;
}

.box {
  margin: 1px;
  width: 24%;
  height: 180px;
  background-color: #171717;
  border-radius: 20px;
  display: inline-block;
  position: relative;
  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;
}

button:hover {
  background-color: red;
}
<html>

<body>
  <link href="Home.css" rel="stylesheet">
  <div class="row">
    <a class="btns">
      <button type="button" class="back" data-con="con" data-scroll="1321">&#8249</button>
      <button type="button" class="next" data-con="con" data-scroll="1321">&#8250</button>
    </a>
    <div class="container" id="con">
      <center>
        <div class="box" style="background-color: red;">
        </div>
        <div class="box" style="background-color: blue;">
        </div>
        <div class="box" style="background-color: yellow;">
        </div>
        <div class="box" style="background-color: black;">
        </div>
        <div class="box" style="background-color: green;">
        </div>
        <div class="box" style="background-color: lightblue;">
        </div>
        <div class="box" style="background-color: lightgreen;">
        </div>
        <div class="box" style="background-color: gray;">
        </div>
        <div class="box" style="background-color: lightgreen;">
        </div>

    </div>
    </center>
  </div>
  </div>
  <script type="text/javascript" src="Home.js"></script>
</body>

</html>

Javascript相关问答推荐

除了在Angular 16中使用快照之外，什么是可行且更灵活的替代方案？

创建1：1比例元素，以另一个元素为中心

docx.js：如何在客户端使用文档修补程序

google docs boldText直到按行执行应用脚本错误

Promise Chain中的第二个useState不更新

如何在每次单击按钮时重新加载HighChart/设置HighChart动画？

用JS从平面文件构建树形 struct 的JSON

连接到游戏的玩家不会在浏览器在线游戏中呈现

确保函数签名中的类型安全：匹配值

在数组中查找重叠对象并仅返回那些重叠对象

在VS代码上一次设置多个变量格式

在SHINY R中的嵌套模块中，不能使用Java代码

FireBase云函数-函数外部的ENV变量

在Odoo中如何以编程方式在POS中添加产品

处理app.param()中的多个参数

rxjs在每次迭代后更新数组的可观察值

JQuery使用选项填充HTMLSELECT并设置默认结果，默认结果显示为空

Plotly.js栏为x轴栏添加辅助文本

在范围数组中查找公共(包含)范围

在执行console.log(new X())时记录一个字符串

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630