基于dragenter事件，用jQuery实现分步上下滚动的方法问询

刚好做过类似的需求，咱们一步步来搞定这个功能：

核心思路 #

当拖拽元素悬停在upper/lower栏时，启动一个定时器，每隔一小段时间让页面滚动固定距离；当拖拽离开或结束时，立刻清除定时器停止滚动。用原生jQuery就能实现，完全不需要额外插件。

完整代码实现 #

HTML（保留你的结构，稍作样式整理）

<div class="scroll-trigger upper"></div>
<div class="scroll-trigger lower"></div>
<!-- 加一段长内容方便测试滚动 -->
<div style="height: 2000px; padding: 20px;">
  拖拽一张图片到上下红色栏，试试滚动效果～
</div>

CSS（把内联样式抽出来更易维护）

.scroll-trigger {
  position: fixed;
  width: 100%;
  height: 35px;
  background-color: red;
  z-index: 2000;
}
.upper {
  top: 0;
  left: 0;
  right: 0;
}
.lower {
  bottom: 0;
  left: 0;
  right: 0;
}

jQuery 逻辑实现

$(document).ready(function() {
  // 滚动配置参数，可根据需求调整
  const scrollStep = 10; // 每次滚动的距离（像素）
  const scrollInterval = 50; // 滚动间隔时间（毫秒）
  let scrollTimer = null; // 存储定时器ID，用于停止滚动

  // 向上滚动函数
  function scrollUp() {
    $('html, body').scrollTop($('html, body').scrollTop() - scrollStep);
  }

  // 向下滚动函数
  function scrollDown() {
    $('html, body').scrollTop($('html, body').scrollTop() + scrollStep);
  }

  // 绑定upper栏的拖拽事件
  $('.upper')
    .on('dragenter', function() {
      // 避免重复创建定时器，防止滚动速度翻倍
      if (!scrollTimer) {
        scrollTimer = setInterval(scrollUp, scrollInterval);
      }
    })
    .on('dragleave dragend', function() {
      clearInterval(scrollTimer);
      scrollTimer = null;
    });

  // 绑定lower栏的拖拽事件
  $('.lower')
    .on('dragenter', function() {
      if (!scrollTimer) {
        scrollTimer = setInterval(scrollDown, scrollInterval);
      }
    })
    .on('dragleave dragend', function() {
      clearInterval(scrollTimer);
      scrollTimer = null;
    });
});

关键细节说明 #

• 事件选择：用dragenter监听拖拽进入，dragleave和dragend监听离开/拖拽结束，确保滚动能及时停止，避免出现“拖拽结束还在滚”的情况。
• 定时器控制：每次启动定时器前先判断scrollTimer是否为空，防止多次触发dragenter导致滚动速度异常。
• 滚动兼容性：同时操作html和body的scrollTop，兼容不同浏览器的滚动对象差异（有些浏览器是html，有些是body）。
• 参数可调：scrollStep和scrollInterval可以按需调整，数值越小滚动越平缓，越大滚动速度越快。

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