javascript - 自动滚动

Question

我正在尝试在 typed.js 库生成的 javascript 中创建打字效果。 http://www.mattboldt.com/demos/typed-js/

我正在使用一个 div 作为容器。问题是，当文本达到 div 的高度时，会出现滚动条(我将溢出设置为自动)，但我希望它自动滚动，以便我可以看到正在键入的文本。你知道我如何做到这一点吗？我在我的平板电脑上编码。

Answer 1

您可以结合内置回调来设置一个间隔，该间隔将容器滚动到底部，直到字符串被完全键入。

var wrapper = document.querySelector('.wrapper')
Typed.new('.element', {
  strings: ["Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."],
  typeSpeed: -2000,
  preStringTyped: function() {
    this.t = setInterval(function() {
      wrapper.scrollTop = wrapper.scrollHeight;
    }, 20);
  },
  onStringTyped: function() {
    clearInterval(this.t);
  }
});

.wrapper {
  width: 500px;
  height: 100px;
  background: #eee;
  overflow: hidden;
  overflow-y: scroll;
}

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.7/typed.min.js"></script>
<div class="wrapper">
  <span class="element"></span>
</div>

如果你想变得非常花哨，你甚至可以在用户手动滚动容器时禁用间隔:

var wrapper = document.querySelector('.wrapper')
Typed.new('.element', {
  strings: ["Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."],
  typeSpeed: -2000,
  preStringTyped: function() {
    this.t = setInterval(() => {
      if(wrapper.scrollTop === 0 || wrapper.scrollTop === wrapper.scrollHeight) {
        wrapper.scrollTop = wrapper.scrollHeight;
      } else {
        clearInterval(this.t);
      }
    }, 20);
  },
  onStringTyped: function() {
    clearInterval(this.t);
  }
});

.wrapper {
  width: 500px;
  height: 100px;
  background: #eee;
  overflow: hidden;
  overflow-y: scroll;
}

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.7/typed.min.js"></script>
<div class="wrapper">
  <span class="element"></span>
</div>