如何链接按钮 onclick 以水平滑动到下一个面板

Question

现在，我的网页具有垂直对齐功能，可以滚动到三个 100vh 部分中的每一个。

在第二部分中，我有 3 个 100vw div 与 {overflow-x:scroll} 水平排列。 所以我继续尝试使用以下代码链接有助于翻译 x 的我的按钮：



const button = document.getElementById('slide');

button.onclick = function () {
  document.getElementById('wrapper').scrollLeft += 20;
};

我想现在这些数字并不重要。 我只想看到它移动，但我无法让它在点击时移动。 有任何想法吗？

codepen.io/brandoniscool/pen/vYBMZyM

Answer 1

包装器上设置了 300% 的宽度，因此需要滚动的是包装器父级（id 特殊）。
在特殊元素上设置 scrollLeft 按预期工作。 document.getElementById('special').scrollLeft += 20;

 const button = document.getElementById('slide'); button.onclick = function () { document.getElementById('special').scrollLeft += 20; };

 * { margin: 0; font-family: 'Montserrat', sans-serif;} body { scroll-snap-type: y mandatory; overflow-x: hidden; width: 100vw; height: 100%; } section { scroll-snap-align: start; height: 100vh; outline: 1px dashed lightgray; background-color: #c1d37f; overflow-x: scroll; }.verticalSection { display: flex; justify-content: center; flex-direction: row; height: inherit; border: 0.5px dashed #664e4c; box-sizing: border-box; /* so the border doesnt increase over the 100% width and heights */ } #wrapper { height: 100%; width: 300%; display: flex; }.horizontalSection { background-color: #f9d4bb; height: 100%; width: 100%; display: flex; justify-content: center; flex-direction: row; border: 0.5px dashed #664e4c; box-sizing: border-box; /* so the border doesnt increase over the 100% width and heights */ } h1 { color: #664e4c; font-size: 3em; margin: auto; }

 <.DOCTYPE html> <html> <head> <title>vertical snap and horizontal snap integration</title> <link rel="stylesheet" type="text/css" href="styles:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript" src="scripts.js"></script> </head> <body> <section> <div class="verticalSection"> <h1> BOX 1</h1> </div> </section> <section id="special"> <div id="wrapper"> <div class="horizontalSection"> <h1> BOX 2.1</h1> <button id="slide" type="button">Next</button></div> <div class="horizontalSection"> <h1> BOX 2.2</h1> </div> <div class="horizontalSection"> <h1> BOX 2.3</h1> </div> </div> </section> <section> <div class="verticalSection"> <h1> BOX 3</h1> </div> </section> </body> </html>

如何链接按钮 onclick 以水平滑动到下一个面板

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-09-26 23:03:39

如何链接按钮 onclick 以水平滑动到下一个面板

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-09-26 23:03:39

解决方案1
1 已采纳 2019-09-26 23:03:39