繁体   English   中英

Typed.js-除非用户与滚动条进行交互,否则随着div的增加,将div滚动到底部吗?

[英]Typed.js - Keep div scrolled to bottom as div increases in size unless user interacts with scrollbar?

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

我能够通过以下代码完成此操作:

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

但是,如果用户尝试向上滚动,则该代码显然会迫使div向后滚动到底部。 相反,我希望它允许用户随意滚动(但默认情况下,在没有用户交互的情况下,滚动到底部)。

要注意的是:每次添加新的代码行时,我都无法执行滚动; 本质上,我不知道何时添加它。 这就是为什么我最初想到使用频繁间隔的原因(如上所示)。

如果用户单击div的滚动条,是否可以结束上述功能?

简单。 像这样:

    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();

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM