Typed.js - 除非用户与滚动条交互,否则当div增加时,保持div滚动到底部?

时间:2017-06-10 18:43:39

标签: javascript jquery html css scroll

我使用Typed.js动态地为div添加文本行。几秒钟后,固定高度的div开发出一个滚动条。我想保持滚动条滚动到底部,因为内容会不断添加而不需要编辑我的Typed.js库的代码。

我用代码完成了这个:

window.setInterval(function() {
  var elem = document.getElementById('scrollBottom');
  elem.scrollTop = elem.scrollHeight;
}, 500);

但是,如果用户尝试向上滚动,代码显然会强制div滚动回到底部。相反,我喜欢它允许用户随意滚动(但默认情况下,没有用户交互,滚动到底部)。

问题:每次添加新的代码行时,我都无法执行滚动操作;基本上,我不知道什么时候会被添加。这就是我最初想到使用频繁间隔的原因(如上所示)。

如果用户点击div的滚动条,有没有办法结束上述功能?

1 个答案:

答案 0 :(得分:0)

易。像这样:

    var youInterval; 

    function startInterval(){

        youInterval = setInterval(function() {
           var elem = document.getElementById('scrollBottom');
           elem.scrollTop = elem.scrollHeight;
        }, 500);

    }

    //If user scrolls, stop interval
    document.addEventListener('scroll', function (event) {
      if (event.target.id === 'scrollBottom') { // or any other filtering condition        

            clearInterval(youInterval);
      }
    }, true /*Capture event*/);

    //And start it whenever you need
    startInterval();