自动滚动

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>