使用mousedown事件实现页面滚动失效问题排查

数据老陈

2026-7-11

问题

页面中的上下滚动按钮使用click事件时功能正常，但替换为mousedown事件后，无法实现按住鼠标持续滚动的效果，仅能触发一次滚动。

核心原因

mousedown事件仅在鼠标按下的瞬间触发一次，不会随鼠标持续按住而重复触发，默认只能执行一次滚动逻辑。
jQuery的animate方法是异步执行的，单次触发只会生成一个动画任务，无法形成持续滚动的效果。
未处理鼠标松开或移出按钮的事件，即使后续添加定时器，也无法在合适时机停止滚动。

实现按住持续滚动的方案

需要通过定时器实现重复滚动，并配合mouseup、mouseleave事件终止滚动，同时避免动画队列堆积：

// 定义全局变量存储定时器ID
let scrollTimer;

// 向下滚动逻辑
$(document).on('mousedown', 'a.scroll-down', function(e) {
  e.preventDefault();
  // 启动定时器，每隔固定时间执行一次滚动
  scrollTimer = setInterval(() => {
    // 先停止当前动画，避免队列堆积
    $('html,body').stop();
    $('html,body').animate({
      scrollTop: $(window).scrollTop() + 50
    }, 80);
  }, 100);
});

// 向上滚动逻辑
$(document).on('mousedown', 'a.scroll-up', function(e) {
  e.preventDefault();
  scrollTimer = setInterval(() => {
    $('html,body').stop();
    $('html,body').animate({
      scrollTop: $(window).scrollTop() - 50
    }, 80);
  }, 100);
});

// 鼠标松开或移出按钮时停止滚动
$(document).on('mouseup mouseleave', 'a.scroll-down, a.scroll-up', function() {
  clearInterval(scrollTimer);
  $('html,body').stop(); // 停止当前动画
});

代码说明

使用setInterval创建定时器，每隔固定时间执行一次滚动操作，模拟持续滚动的效果。
每次执行滚动前调用stop()方法终止当前动画，防止多个动画任务排队导致滚动不流畅。
通过mouseup和mouseleave事件清除定时器，确保松开鼠标或鼠标离开按钮时停止滚动。

完整测试代码

.scroll-down {
  position: fixed;
  right: 0.2rem;
  bottom: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  text-align: center;
  color: #fff;
  background: rgba(90, 92, 105, 0.5);
  line-height: 46px;
}

.scroll-down:focus,
.scroll-down:hover {
  color: white;
}

.scroll-down:hover {
  background: #5a5c69;
}

.scroll-down i {
  font-weight: 800;
}

.scroll-up {
  position: fixed;
  right: 0.2rem;
  bottom: 4rem;
  width: 2.75rem;
  height: 2.75rem;
  text-align: center;
  color: #fff;
  background: rgba(90, 92, 105, 0.5);
  line-height: 46px;
}

.scroll-up:focus,
.scroll-up:hover {
  color: white;
}

.scroll-up:hover {
  background: #5a5c69;
}

.scroll-up i {
  font-weight: 800;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/all.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet" />


<body id="page-top">
  <div id="wrapper">
    <div id="content">
      <div class="container-fluid">
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-6">
            <button class="btn btn-block btn-primary">mybutton</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <a class="scroll-up rounded" href="#">
    <i class="fas fa-angle-up"></i>
  </a>
  <a class="scroll-down rounded" href="#">
    <i class="fas fa-angle-down"></i>
  </a>
</body>

内容的提问来源于stack exchange，提问作者yaylitzis

使用mousedown事件实现页面滚动失效问题排查

代码说明 #

代码说明