如何阻止內容跳躍？ （鍵入js）

Question

我為靜態首頁編寫了以下代碼。 在此，我想使用類型化的庫，該庫包含在部分“ head.html”中。 但是由於打字，我的內容不斷跳躍。 這是因為字幕容器在某些時候是空的。 我嘗試添加默認的占位符，但這似乎無法解決問題。

 particlesJS.load('particles-js', '/json/particlesjs-config.json', function() { console.log('callback - particles.js config loaded'); }); var typed = new Typed('#typed', { strings: ['First, solve the problem', 'Some <strong>HTML</strong>', 'Chars &times; &copy;'], typeSpeed: 0, backSpeed: 0, loop: true }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.js"></script> {{ partial "head.html" . }} <section class="hero is-info is-medium"> <div class="hero-head"> {{ partial "navbar.html" .}} </div> <div id="particles-js"></div> <div class="hero-body"> <div class="container has-text-centered"> <p class="title"> </p> <p class="subtitle inline-block" id="typed"> </p> </div> </div> <div class="hero-foot"> <nav class="tabs is-boxed is-fullwidth"> <div class="container"> <ul> <li class="is-active"> <a>Overview</a> </li> <li> <a>Work</a> </li> <li> <a>Grid</a> </li> </ul> </div> </nav> </div> </section> {{ partial "footer.html" .}} 

有人可以幫我嗎？

Answer 1

我在嘗試使用Typed js時遇到了類似的問題。 經過研究后，我在代碼中添加了一些CSS來解決此問題。 這可能會解決您的問題。

在您提供的代碼中，有兩個錯誤。 首先，您需要在帶有id="typed"的p標簽周圍添加一個div標簽，並且根據docs ， id="typed"標簽必須是一個span標簽。 其次，您需要添加CSS以增加高度和填充。

最后，它的Typed js部分應如下所示：

<style>
  .text-body {
  height: 100px;
  padding: 10px;
}
</style>

<div class="text-body">
    <span id="typed"></span>
</div>

Answer 2

我建議做以下技巧：添加不可見的“ cursor char”，像這樣

  <div class="container"> <div id="typed-strings" style="display:none;">Text here</div> <span id="typed"></span> <span style="visibility:hidden;">|</span> </div>