vue2当内容超出隐藏滚动条并且可以手动拖拽滚动
时间: 2023-08-16 10:08:15 浏览: 79
可以使用CSS中的overflow属性来实现滚动条隐藏,同时使用JavaScript来实现手动拖拽滚动。
HTML代码:
```html
<div class="scroll-container" ref="scrollContainer">
<div class="content">
<!-- 这里放置内容 -->
</div>
</div>
```
CSS代码:
```css
.scroll-container {
position: relative;
overflow: hidden;
}
.content {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
}
```
首先,将scroll-container元素的overflow属性设置为hidden,这样当内容超出容器宽度时,就会隐藏滚动条。
接着,将content元素的position属性设置为absolute,使得它相对于scroll-container元素进行定位。同时,将white-space属性设置为nowrap,使得子元素不会换行。
JavaScript代码:
```javascript
export default {
mounted() {
const scrollContainer = this.$refs.scrollContainer;
let isDragging = false;
let startX = 0;
let scrollLeft = 0;
scrollContainer.addEventListener('mousedown', e => {
isDragging = true;
startX = e.pageX - scrollContainer.offsetLeft;
scrollLeft = scrollContainer.scrollLeft;
});
scrollContainer.addEventListener('mouseleave', () => {
isDragging = false;
});
scrollContainer.addEventListener('mouseup', () => {
isDragging = false;
});
scrollContainer.addEventListener('mousemove', e => {
if (!isDragging) return;
e.preventDefault();
const x = e.pageX - scrollContainer.offsetLeft;
const walk = (x - startX) * 2;
scrollContainer.scrollLeft = scrollLeft - walk;
});
}
}
```
在mounted钩子函数中,首先获取scroll-container元素的引用,然后定义一些变量用于记录拖拽状态和位置。
接着,为scroll-container元素绑定mousedown、mouseleave、mouseup和mousemove事件。当mousedown事件触发时,将isDragging设置为true,同时记录起始位置和滚动距离。当mouseleave和mouseup事件触发时,将isDragging设置为false。当mousemove事件触发时,根据鼠标移动的距离计算出需要滚动的距离,然后将scroll-container元素的scrollLeft属性设置为滚动距离即可。
这样,就可以实现手动拖拽滚动了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)