如何链接按钮 onclick 以水平滑动到下一个面板
[英]How can I link button onclick to slide to the next panel horizontally
问题描述
Right now my webpage has vertical snap to scroll to each of the three 100vh sections.
现在，我的网页具有垂直对齐功能，可以滚动到三个 100vh 部分中的每一个。
In the second section, I have 3 100vw divs lined up horizontally with { overflow-x: scroll }.在第二部分中，我有 3 个 100vw div 与 {overflow-x:scroll} 水平排列。 So I went ahead and try to link the my button that would help translate x using the following code:所以我继续尝试使用以下代码链接有助于翻译 x 的我的按钮：
const button = document.getElementById('slide');
button.onclick = function () {
document.getElementById('wrapper').scrollLeft += 20;
};
I guess right now the numbers doesn't matter.我想现在这些数字并不重要。 I just want to see it moving, but I can't get it to move on-click.我只想看到它移动，但我无法让它在点击时移动。 Any ideas?有任何想法吗？
codepen.io/brandoniscool/pen/vYBMZyM
1 个解决方案
解决方案1
1 已采纳 2019-09-26 23:03:39
300% width is set on the wrapper, so it is the wrapper parent (id special) which needs to scroll.包装器上设置了 300% 的宽度，因此需要滚动的是包装器父级（id 特殊）。
Setting scrollLeft on the special element works as expected.在特殊元素上设置 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.