div超出屏幕我添加了overflow: auto;滑动的功能,当鼠标放在滑动条上面的时候并且点击了左键开始滑动的时候触发事件,然后滑动到原来刚开始的位置时触发事件,这两个事件是需要在滑动条上面的时候才会实现,在其他的地方不会实现
时间: 2024-04-11 20:26:16 浏览: 130
css实现div自动添加滚动条(图片或文字等超出时显示)
要在滑动条上触发事件并且在其他地方不触发,您可以使用 JavaScript 来监听滑动条的事件。具体来说,您可以使用 `scroll` 事件来检测滚动条的位置变化,并触发相应的事件。
下面是一个示例代码:
```html
<style>
#scrollableDiv {
overflow: auto;
width: 200px;
height: 200px;
}
</style>
<div id="scrollableDiv">
<div style="width: 100%; height: 500px;">
<!-- 内容 -->
</div>
</div>
<script>
var scrollableDiv = document.getElementById('scrollableDiv');
var isMouseDown = false;
var startScrollTop = 0;
scrollableDiv.addEventListener('mousedown', function(event) {
if (event.button === 0) { // 检查是否点击了左键
isMouseDown = true;
startScrollTop = scrollableDiv.scrollTop;
}
});
scrollableDiv.addEventListener('mouseup', function(event) {
if (event.button === 0) { // 检查是否释放了左键
isMouseDown = false;
}
});
scrollableDiv.addEventListener('scroll', function(event) {
if (isMouseDown && scrollableDiv.scrollTop === startScrollTop) {
// 触发事件,滑动到原始位置
console.log('滑动到原始位置');
}
});
</script>
```
在上面的示例中,我们使用 `scroll` 事件来监听滚动条的位置变化。当滚动条在鼠标按下时移动到原始位置时,触发相应的事件。您可以根据需要修改事件的处理逻辑。
需要注意的是,此示例中的事件只在滑动条上触发,而不在其他位置触发。
阅读全文