link按钮onclick如何水平滑动到下一个面板

Question

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

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



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

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

我想现在数字并不重要。我只想看到它移动，但我不能让它在点击时移动。有什么想法吗？

codepen.io/brandoniscool/pen/vYBMZyM

Answer 1

wrapper 设置了 300% 宽度，所以需要滚动的是 wrapper parent (id special)。
在特殊元素上设置 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>

link按钮onclick如何水平滑动到下一个面板

How can I link button onclick to slide to the next panel horizontally

html

javascript

css

translate-animation