在多个div中应用水平滚动并且只需点击一次按钮,可以通过以下步骤实现:
.container {
width: 100%;
overflow-x: hidden;
}
var container = document.querySelector('.container');
var divs = document.querySelectorAll('.scrollable-div');
var totalWidth = 0;
divs.forEach(function(div) {
totalWidth += div.offsetWidth;
});
container.style.width = totalWidth + 'px';
var button = document.querySelector('.scroll-button');
button.addEventListener('click', function() {
container.scrollLeft += container.offsetWidth;
});
这样,每次点击按钮时,容器就会水平滚动到下一个div元素。
请注意,以上代码只是一个简单的示例,你可以根据实际需求进行修改和优化。另外,腾讯云并没有直接相关的产品和链接地址与此问题相关。
领取专属 10元无门槛券
手把手带您无忧上云