要让下一个/上一个按钮在滚动条上工作,可以通过以下步骤实现:
<div class="scroll-container">
<!-- 内容 -->
</div>
.scroll-container {
overflow: auto;
height: 300px; /* 设置容器的高度 */
}
<div class="scroll-container">
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<!-- 添加更多内容 -->
</div>
<div class="scroll-container">
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<!-- 添加更多内容 -->
</div>
<button id="prev-btn">上一个</button>
<button id="next-btn">下一个</button>
<script>
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const container = document.querySelector('.scroll-container');
prevBtn.addEventListener('click', () => {
container.scrollBy(0, -100); // 向上滚动100像素
});
nextBtn.addEventListener('click', () => {
container.scrollBy(0, 100); // 向下滚动100像素
});
</script>
在上述示例中,通过scrollBy()方法实现滚动,第一个参数表示水平滚动量,第二个参数表示垂直滚动量。负值表示向上/左滚动,正值表示向下/右滚动。
这样,当点击"上一个"按钮时,容器会向上滚动100像素;当点击"下一个"按钮时,容器会向下滚动100像素。
这是一个基本的实现方式,具体的样式和滚动量可以根据实际需求进行调整。
领取专属 10元无门槛券
手把手带您无忧上云