使用JavaScript来实现将横向滚动条换成鼠标的左右拖动
时间: 2024-05-04 10:15:51 浏览: 22
可以使用 CSS 属性 `overflow-x: hidden` 隐藏横向滚动条,然后使用 JavaScript 监听鼠标拖动事件,根据拖动的距离来改变元素的 `scrollLeft` 属性,从而实现鼠标左右拖动的效果。具体实现可以参考以下代码:
HTML:
```html
<div class="scroll-wrapper">
<div class="scroll-content">
<!-- 横向内容 -->
</div>
</div>
```
CSS:
```css
.scroll-wrapper {
overflow-x: hidden;
white-space: nowrap; /* 横向内容不换行 */
}
.scroll-content {
display: inline-block; /* 横向内容以行内块元素显示 */
}
```
JavaScript:
```javascript
var wrapper = document.querySelector('.scroll-wrapper');
var content = document.querySelector('.scroll-content');
var isDown = false; // 鼠标是否按下
var startX; // 鼠标按下时的坐标
var scrollLeft; // 滚动条左侧的距离
wrapper.addEventListener('mousedown', function(e) {
isDown = true;
startX = e.pageX - wrapper.offsetLeft;
scrollLeft = wrapper.scrollLeft;
});
wrapper.addEventListener('mouseleave', function() {
isDown = false;
});
wrapper.addEventListener('mouseup', function() {
isDown = false;
});
wrapper.addEventListener('mousemove', function(e) {
if (!isDown) return;
e.preventDefault();
var x = e.pageX - wrapper.offsetLeft;
var walk = (x - startX) * 2; // 拖动距离乘以一个系数,可以调整拖动速度
wrapper.scrollLeft = scrollLeft - walk;
});
```
当然,实现方式有很多种,以上只是其中一种简单的实现方式。
相关推荐
![iso](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)