鼠标停下时继续滚动容器

时间：2019-06-30 19:37:48

标签： javascript

我有很多水平滚动容器，我将鼠标悬停在上面。在纯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>

1 个答案:

答案 0 :(得分：2)

您可以使用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>

相关问题
最新问题