js实现横排多个dom自动横向滚动,且能够手动控制单个滚动距离
时间: 2023-08-08 12:04:53 浏览: 51
可以使用CSS属性`overflow-x: scroll`实现横向滚动,同时使用JavaScript监听滚动事件实现手动控制单个滚动距离。
HTML结构示例:
```html
<div class="scroll-wrapper">
<div class="scroll-content">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
</div>
</div>
```
CSS样式:
```css
.scroll-wrapper {
width: 100%;
overflow-x: auto;
white-space: nowrap;
}
.scroll-content {
display: inline-block;
}
.item {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 10px;
background-color: #ccc;
}
```
JavaScript代码:
```javascript
const wrapper = document.querySelector('.scroll-wrapper');
const content = document.querySelector('.scroll-content');
// 监听滚动事件
wrapper.addEventListener('scroll', () => {
console.log('Scroll position:', wrapper.scrollLeft);
});
// 手动控制单个滚动距离
function scrollByItem(itemIndex) {
const items = content.querySelectorAll('.item');
const item = items[itemIndex];
const itemOffsetLeft = item.offsetLeft;
const itemWidth = item.offsetWidth;
const wrapperWidth = wrapper.offsetWidth;
// 计算目标位置
const targetScrollLeft = itemOffsetLeft + itemWidth / 2 - wrapperWidth / 2;
// 滚动到目标位置
wrapper.scrollTo({
left: targetScrollLeft,
behavior: 'smooth'
});
}
```
通过调用`scrollByItem`函数传入要滚动的元素的索引即可实现手动控制单个滚动距离。例如,要滚动到第2个元素,可以这样调用:
```javascript
scrollByItem(1);
```