javascript - 当鼠标停止时继续滚动容器

Question

我有很多水平滚动容器，我通过鼠标悬停来移动它们。在纯 JavaScript 中，当鼠标也停止时，如何继续滚动它们？

我尝试添加带有超时的辅助函数，但结果显示动画很奇怪。

感谢您的帮助!

这是我当前正在使用的代码片段 - 将鼠标悬停在行上以将其左右滚动。

window.onload = function() {
var gamerow = document.querySelectorAll(".gamerow");
if(gamerow) {

function indexInClass(node) {
  var className = node.className;
  var num = 0;
  for (var i = 0; i < gamerow.length; i++) {
    if (gamerow[i] === node) {
      return num;
    }
    num++;
  }
  return -1;
}
	
var scrolla = [0,0,0,0,0,0];

for (var i = 0; i < gamerow.length; i++) {	
var item = gamerow[i];	

item.addEventListener('mousemove', function scrollHoverly(e) {
	
	e = window.event || e;
var container_w = this.offsetWidth;
var max_scroll = this.scrollWidth - this.offsetWidth;
this.setAttribute("id", "scrolling");
var x = indexInClass(document.getElementById('scrolling'));

var mouse_x = e.clientX - this.offsetLeft;
var mouseperc = 100 * mouse_x / container_w;
var speed = mouseperc - 50;	


		if (speed !== 0) {
    		scrolla[x] += speed / 10;
        if (scrolla[x] < 0) scrolla[x] = 0;
        if (scrolla[x] > max_scroll) scrolla[x] = max_scroll;
    		this.scrollLeft = scrolla[x];
		
		}
	
} );

item.addEventListener('mouseleave', function stopHoverly(e) {
	e = window.event || e;
var container_w = this.offsetWidth;
var max_scroll = this.scrollWidth - this.offsetWidth;		
var speed = 0;
this.setAttribute("id", "scrolling");
var x = indexInClass(document.getElementById('scrolling'));
	
		if (speed !== 0) {
    		scrolla[x] += speed / 15;
        if (scrolla[x] < 0) scrolla[x] = 0;
        if (scrolla[x] > max_scroll) scrolla[x] = max_scroll;
    		this.scrollLeft = scrolla[x];
    }
this.removeAttribute("id","scrolling");
} );

	}
};
};

.gamerow {
    padding: 0px 15px;
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overflow-y: hidden;
    transform: scale(1);
}
.inside {
  width: 150px;
  height: 50px;
    display: inline-block;
    text-align: center;
    border: 2px solid #000;
    margin: 0px 8px 8px 0px;
    flex: 0 0 auto;
    box-shadow: -1px 1px 1px #adadad;
    border-radius: 5px;
}
::-webkit-scrollbar {
    display: none;
}

<container>
<div class="gamerow">
<div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div>
</div>
<div class="gamerow">
<div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div>
</div>
<div class="gamerow">
<div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div>
</div>
<div class="gamerow">
<div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div>
</div>
<div class="gamerow">
<div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div><div class="inside"></div>
</div>
</container>

Answer 1

您可以使用setInterval以给定的时间间隔重复调用函数。

我从事件处理程序中删除了用于更新实际 scrollLeft 属性的代码，并将其放入每 10 毫秒调用一次的函数中(您可能需要调整该间隔)。我还将 x、speed 和 max_scroll 的变量声明移到 for 循环之外，以便可以访问它们通过新功能。

这可能不是性能方面最好的解决方案，但它确实有效。

编辑:将对 setInterval 的调用移出 for 循环。

window.onload = function() {
  var gamerow = document.querySelectorAll(".gamerow");

  if (gamerow) {

    function indexInClass(node) {
      var className = node.className;
      var num = 0;
      for (var i = 0; i < gamerow.length; i++) {
        if (gamerow[i] === node) {
          return num;
        }
        num++;
      }
      return -1;
    }

    var scrolla = [0, 0, 0, 0, 0, 0];
    var x = 0;
    var speed = 0;
    var max_scroll;

    for (var i = 0; i < gamerow.length; i++) {
      var item = gamerow[i];

      item.addEventListener('mousemove', function scrollHoverly(e) {

        e = window.event || e;
        var container_w = this.offsetWidth;
        max_scroll = this.scrollWidth - this.offsetWidth;
        this.setAttribute("id", "scrolling");
        x = indexInClass(this);

        var mouse_x = e.clientX - this.offsetLeft;
        var mouseperc = 100 * mouse_x / container_w;
        speed = mouseperc - 50;
      });

      item.addEventListener('mouseleave', function stopHoverly(e) {
        e = window.event || e;
        var container_w = this.offsetWidth;
        max_scroll = this.scrollWidth - this.offsetWidth;
        speed = 0;
        x = indexInClass(this);
        this.removeAttribute("id", "scrolling");
      });

    }

    setInterval(function() {
      if (speed !== 0) {
        scrolla[x] += speed / 15;
        if (scrolla[x] < 0) scrolla[x] = 0;
        if (scrolla[x] > max_scroll) scrolla[x] = max_scroll;
        gamerow[x].scrollLeft = scrolla[x];
      }
    }, 10);
  };
};

.gamerow {
  padding: 0px 15px;
  text-align: left;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overflow-y: hidden;
  transform: scale(1);
}

.inside {
  width: 150px;
  height: 50px;
  display: inline-block;
  text-align: center;
  border: 2px solid #000;
  margin: 0px 8px 8px 0px;
  flex: 0 0 auto;
  box-shadow: -1px 1px 1px #adadad;
  border-radius: 5px;
}

::-webkit-scrollbar {
  display: none;
}

<container>
  <div class="gamerow">
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
  </div>
  <div class="gamerow">
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
  </div>
  <div class="gamerow">
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
  </div>
  <div class="gamerow">
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
  </div>
  <div class="gamerow">
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
  </div>
  <div class="gamerow">
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
  </div>
</container>