使用鼠标的持续时间按滚动

Question

我对此进行了编码：

$("#scroll-to-left-button").on("mousedown", function() {
  var x = $("#scroll-area").scrollLeft();
  $("#scroll-area").scrollLeft(x - 10);
});


$("#scroll-to-right-button").on("mousedown", function() {
  var x = $("#scroll-area").scrollLeft();
  $("#scroll-area").scrollLeft(x + 10);
});

#container {
  width: 50%;
  height: 100px;
  background-color: grey;
  position: relative;
}

#scroll-area {
  white-space: nowrap;
  overflow-x: auto;
  height: 100%;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div id="container">
  <div id="scroll-area">
    <div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
  </div>
</div>

<button id="scroll-to-left-button">Scroll to left</button>
<button id="scroll-to-right-button">Scroll to right</button>

您需要经常单击按钮以浏览此容器。有没有办法根据鼠标按下的持续时间将其允许？就像将鼠标按下一样，它会继续滚动？如果您停下来，它将停止。

如果有人可以帮助我，会很高兴。

Answer 1

这是一个可行的解决方案。另外你的代码有点湿，所以我重构了一下。您只需要一个 mousedown 事件侦听器。

let interval;

$('.scroll-btn').on('mousedown', ({ target }) => {
    const type = $(target).attr('id');

    interval = setInterval(() => {
        var x = $('#scroll-area').scrollLeft();
        $('#scroll-area').scrollLeft(type === 'left' ? x - 10 : x + 10);
    }, 50);
});

$('.scroll-btn').on('mouseout mouseup', () => clearInterval(interval));

#container {
    width: 50%;
    height: 100px;
    background-color: grey;
    position: relative;
}

#scroll-area {
    white-space: nowrap;
    overflow-x: auto;
    height: 100%;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div id="container">
    <div id="scroll-area">
        <div id="text">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
            sed diam voluptua.
        </div>
    </div>
</div>

<button id="left" class="scroll-btn">Scroll Left</button>
<button id="right" class="scroll-btn">Scroll Right</button>

Answer 2

好吧，mousedown 和 mouseup 是一对很好的组合，尽管您只使用了 mousedown :)

下面是一个如何完成此操作的示例。

请注意，还可以对此代码执行其他一些操作，使其看起来更好：

• 可能不需要 .on(...，您可以将其编写为 .mousedown （...
• 左右按钮的代码看起来非常相似，您可以将这些块合并为一个，并通过附加属性进行区分（假设像 move="10" for右键和move="-10" 为左侧的值，然后获取该值以便将其添加到 scrollLeft）

var tmr;

$(".scroll-button").mousedown(function() {
    //let's setup the timer here...
   move = +$(this).attr("move");
   tmr = setInterval(function(){
       $("#scroll-area")[0].scrollLeft+=move;
   }, 250)
});

$(".scroll-button").mouseup(function() {
    // and destroy the timer here
   clearInterval(tmr);
});

#container {
  width: 50%;
  height: 300px;
  background-color: grey;
  position: relative;
}

#scroll-area {
  white-space: nowrap;
  overflow-x: auto;
  height: 100%;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div id="container">
  <div id="scroll-area">
    <div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
  </div>
</div>

<button class="scroll-button" move="-10">Scroll to left</button>
<button class="scroll-button" move="10">Scroll to right</button>