div超出屏幕我让他有滑动的功能了，当鼠标放在滑动条上面的时候并且点击了左键开始滑动的时候触发事件，然后滑动到原来刚开始的位置时触发事件，这些事件需要在滑动条上面施加不是div

如果您希望在滑动条上触发事件而不是在 `div` 元素上触发事件，您可以将事件绑定到滚动条所在的父容器（例如，`body` 或其他包含滚动条的元素）。然后，通过判断鼠标相对于滚动条位置的变化来触发事件。

下面是一个示例代码：

<style>
  .scrollable-container {
    overflow: auto;
    width: 200px;
    height: 200px;
  }
</style>

<div class="scrollable-container">
  <div style="width: 100%; height: 500px;">
    <!-- 内容 -->
  </div>
</div>

<script>
  var scrollableContainer = document.querySelector('.scrollable-container');
  var isMouseDown = false;
  var startMouseY = 0;
  var startScrollTop = 0;

  scrollableContainer.addEventListener('mousedown', function(event) {
    if (event.button === 0) { // 检查是否点击了左键
      isMouseDown = true;
      startMouseY = event.clientY;
      startScrollTop = scrollableContainer.scrollTop;
    }
  });

  scrollableContainer.addEventListener('mouseup', function(event) {
    if (event.button === 0) { // 检查是否释放了左键
      isMouseDown = false;
    }
  });

  scrollableContainer.addEventListener('mousemove', function(event) {
    if (isMouseDown) {
      var currentMouseY = event.clientY;
      var scrollAmount = currentMouseY - startMouseY;

      // 设置滚动条位置
      scrollableContainer.scrollTop = startScrollTop - scrollAmount;

      // 触发事件的条件，例如滚动条回到初始位置
      if (scrollableContainer.scrollTop === 0) {
        // 触发事件1
        console.log('滚动条回到初始位置');
      } else if (scrollableContainer.scrollTop + scrollableContainer.clientHeight === scrollableContainer.scrollHeight) {
        // 触发事件2
        console.log('滚动条到达底部');
      }
    }
  });
</script>

在上面的示例中，我们将事件绑定到了 `scrollableContainer`，并通过修改 `scrollableContainer.scrollTop` 来实现滚动。根据滚动条的位置变化，我们可以触发相应的事件。您可以根据自己的需求来修改触发事件的条件和事件处理逻辑。