代码之家 › 专栏 › 技术社区 › Anna_B

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

horizontal-scrolling overflow jquery javascript

Anna_B · 技术社区 · 2 年前

我把这个编码了:

$("#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>

你需要经常点击按钮来浏览这个容器。有没有一种方法可以根据鼠标按下的持续时间进行调整?比如如果你一直按住鼠标,它就会继续滚动?如果你停下来,它就会停下来。

如果有人能帮我,我会很高兴的。

2 回复 | 直到 2 年前

mstephen19 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('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>

nicael 2 年前

嗯,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>