自动滚动DIV -

Question

我使用在stackoverflow中共享的代码段构建了一个原型。我正在寻找添加延迟计时器，以便只有在用户没有活动时才会进行自动滚动。另外，我怎样才能使这个更友好，而不是使用悬停？

这是原型的小提琴： http://jsfiddle.net/creativesplash/4xuy7fc6/1/

以下是片段：

＆＃13;

＆＃13;

// global level variables.
var isPaused = false;
var direction = 1;
var element = $('#box');

// interval for scroll.
setInterval(function () {
    if (!isPaused) {
        var pos = element.scrollLeft();
        var offset = 1 * direction;
        element.scrollLeft(pos + offset);

        // Change the scroll direction when hit an end.
        if ((element[0].scrollWidth - element.scrollLeft() == element.outerWidth()) || (element.scrollLeft() <= 0)) {
            direction *= -1;
        }
    }

}, 10);

$('#box').hover(

function () {
    isPaused = true;
}, function () {
    isPaused = false;
});

＆＃13;

.boxes {width:75px; height:75px; display:inline-block; border:1px solid #ccc; text-align:center; padding-top:50px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" class="timeline container" style="overflow-y:scroll; width:100%; white-space:nowrap">
  <div class="boxes">1</div>
  <div class="boxes">2</div>
  <div class="boxes">3</div>
  <div class="boxes">4</div>
  <div class="boxes">5</div>
  <div class="boxes">6</div>
  <div class="boxes">7</div>
  <div class="boxes">8</div>
  <div class="boxes">9</div>
  <div class="boxes">10</div>
  <div class="boxes">1</div>
  <div class="boxes">2</div>
  <div class="boxes">3</div>
  <div class="boxes">4</div>
  <div class="boxes">5</div>
  <div class="boxes">6</div>
  <div class="boxes">7</div>
  <div class="boxes">8</div>
  <div class="boxes">9</div>
  <div class="boxes">10</div>
  <div class="boxes">1</div>
  <div class="boxes">2</div>
  <div class="boxes">3</div>
  <div class="boxes">4</div>
  <div class="boxes">5</div>
  <div class="boxes">6</div>
  <div class="boxes">7</div>
  <div class="boxes">8</div>
  <div class="boxes">9</div>
  <div class="boxes">10</div>
  <div class="boxes">1</div>
  <div class="boxes">2</div>
  <div class="boxes">3</div>
  <div class="boxes">4</div>
  <div class="boxes">5</div>
  <div class="boxes">6</div>
  <div class="boxes">7</div>
  <div class="boxes">8</div>
  <div class="boxes">9</div>
  <div class="boxes">10</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果我理解正确，您的代码运行良好，但您想要一种更有效的设备，例如手机，没有hover？

touchstart事件怎么样？ 像这样的东西：

$('#box').on('touchstart', function(ev){
  if (isPaused){
    isPaused = false;
  }else{
    isPaused = true;
  }
});

我没有对此进行测试，我不知道它是否会按预期工作，但我的逻辑是： 这些框是滚动的，然后用户触摸#box并停止，如果他再次触摸，它会再次开始滚动。这只是一个想法。

修改

这是我们在评论中所说的内容的片段 闲置定时器直到滚动+触摸和触摸事件以停止滚动
打开片段并运行以测试

＆＃13;

＆＃13;

$(document).ready(function(){
  // global level variables.
  var isPaused = false;
  var direction = 1;
  var element = $('#box');
  var waitTimerUntilScroll = 4000;
  var idleTimer = setTimeout(setScrolling, waitTimerUntilScroll);
  var scroller;

  window.onmousemove = resetTimer;
  window.onmousedown = resetTimer; 
  window.ontouchstart = resetTimer; 
  window.onclick = resetTimer;     
  window.onkeypress = resetTimer;   
  window.addEventListener('scroll', resetTimer, true); 
  
  $('#box').on('touchstart', function(ev){
    if (isPaused){
      isPaused = false;
    }else{
      isPaused = true;
    }
	});
  
  $('#box').hover(
  	function () {
    	isPaused = true;
    }, 
    function () {
      isPaused = false;
    }
  );  
  
  function resetTimer() {
    clearTimeout(idleTimer);
    idleTimer = setTimeout(setScrolling, waitTimerUntilScroll);  // time is in milliseconds
  }
  
  // interval for scroll - called only when idle
  function setScrolling(){
    scroller = setInterval(function () {
      if (!isPaused) {
        clearTimeout(idleTimer);
        var pos = element.scrollLeft();
        var offset = 1 * direction;
        element.scrollLeft(pos + offset);

        // Change the scroll direction when hit an end.
        if ((element[0].scrollWidth - element.scrollLeft() == element.outerWidth()) || (element.scrollLeft() <= 0)) {
            direction *= -1;
          }
      }

    }, 10);
	}
});

＆＃13;

.boxes {width:75px; height:75px; display:inline-block; border:1px solid #ccc; text-align:center; padding-top:50px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" class="timeline container" style="overflow-y:scroll; width:100%; white-space:nowrap">
  <div class="boxes">1</div>
  <div class="boxes">2</div>
  <div class="boxes">3</div>
  <div class="boxes">4</div>
  <div class="boxes">5</div>
  <div class="boxes">6</div>
  <div class="boxes">7</div>
  <div class="boxes">8</div>
  <div class="boxes">9</div>
  <div class="boxes">10</div>
  <div class="boxes">1</div>
  <div class="boxes">2</div>
  <div class="boxes">3</div>
  <div class="boxes">4</div>
  <div class="boxes">5</div>
  <div class="boxes">6</div>
  <div class="boxes">7</div>
  <div class="boxes">8</div>
  <div class="boxes">9</div>
  <div class="boxes">10</div>
  <div class="boxes">1</div>
  <div class="boxes">2</div>
  <div class="boxes">3</div>
  <div class="boxes">4</div>
  <div class="boxes">5</div>
  <div class="boxes">6</div>
  <div class="boxes">7</div>
  <div class="boxes">8</div>
  <div class="boxes">9</div>
  <div class="boxes">10</div>
  <div class="boxes">1</div>
  <div class="boxes">2</div>
  <div class="boxes">3</div>
  <div class="boxes">4</div>
  <div class="boxes">5</div>
  <div class="boxes">6</div>
  <div class="boxes">7</div>
  <div class="boxes">8</div>
  <div class="boxes">9</div>
  <div class="boxes">10</div>
</div>

＆＃13;

＆＃13;

＆＃13;