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

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 和 mouseup 是一对很好的组合，虽然你只用过 mousedown :)

这是一个如何完成的示例。

请注意，可以对这段代码做一些其他的事情，让它看起来更漂亮：

.on(... 可能不需要，你可以把它写成 .mousedown(...
左右按钮的代码看起来非常相似，您可以将这些块合并为一个并通过一个额外的属性来区分（比如 move="10" 代表右按钮， 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>

Answer 2

这是一个可行的解决方案。另外你的代码有点湿，所以我重构了一下。您只需要一个 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>

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

Using the duration of mouse press for scrolling

javascript

jquery

overflow

horizontal-scrolling