如何从此打字机脚本中删除垂直滚动条

Question

我发现了关于这个Typewriter script的问题。

代码如下：

function setupTypewriter(t) {
  var HTML = t.innerHTML;

  t.innerHTML = "";

  var cursorPosition = 0,
    tag = "",
    writingTag = false,
    tagOpen = false,
    typeSpeed = 100,
    tempTypeSpeed = 0;

  var type = function() {
    if (writingTag === true) {
      tag += HTML[cursorPosition];
    }

    if (HTML[cursorPosition] === "<") {
      tempTypeSpeed = 0;
      if (tagOpen) {
        tagOpen = false;
        writingTag = true;
      } else {
        tag = "";
        tagOpen = true;
        writingTag = true;
        tag += HTML[cursorPosition];
      }
    }
    if (!writingTag && tagOpen) {
      tag.innerHTML += HTML[cursorPosition];
    }
    if (!writingTag && !tagOpen) {
      if (HTML[cursorPosition] === " ") {
        tempTypeSpeed = 0;
      } else {
        tempTypeSpeed = (Math.random() * typeSpeed) + 50;
      }
      t.innerHTML += HTML[cursorPosition];
    }
    if (writingTag === true && HTML[cursorPosition] === ">") {
      tempTypeSpeed = (Math.random() * typeSpeed) + 50;
      writingTag = false;
      if (tagOpen) {
        var newSpan = document.createElement("span");
        t.appendChild(newSpan);
        newSpan.innerHTML = tag;
        tag = newSpan.firstChild;
      }
    }

    cursorPosition += 1;
    if (cursorPosition < HTML.length - 1) {
      setTimeout(type, tempTypeSpeed);
    }
  };

  return {
    type: type
  };
}

var typer = document.getElementById('typewriter');

typewriter = setupTypewriter(typewriter);
typewriter.type();

.var-highlight {
  color: #C0AD60;
}

.string-highlight {
  color: rgba(253, 149, 90, 0.8);
}

#typewriter {
  font-size: 2em;
  margin: 0;
  font-family: "Courier New";
}

#typewriter:after {
  content: "|";
  -webkit-animation: blink 500ms linear infinite alternate;
          animation: blink 500ms linear infinite alternate;
}

@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<pre id="typewriter">
<span class="var-highlight">var</span> object = {
    name: <span class="string-highlight">'Foo'</span>,
    type: <span class="string-highlight">'Bar'</span>,
    location: <span class="string-highlight">'Earth'</span>,
    properties:[<span class="string-highlight">'Javascript'</span>,
                <span class="string-highlight">'HTML'</span>,
                <span class="string-highlight">'CSS'</span>];
}; </pre>

现在的问题是，当此代码开始播放时，它将在右边界创建一个滚动条。

如何删除该滚动条？

我只想拥有打字机动画，以使它看起来更流畅并且在网站中占有更多比例。