绘制仅在需要的滚动条上闪烁

Question

我试图删除油漆闪烁，但它确实重绘了整个文档。 CodePen Example What I am doing.

CSS

<a id="scrollButton" href="#target">Click me!</a>
<section id="target">
  <p>Yay!</p>
</section>

HTML

body {
  background: #7FDBFF;
  font-family: sans-serif;
  font-size: 200%;
  &.in-transition {
    transition: transform 900ms ease;
  }
}

#scrollButton {
  text-align: center;
}

#target {
  background: orange;
  margin-top: 600px;
  height: 2000px;
}

p, a {
  color: #111;
  text-align: center;
  display: block;
  padding: 10px;
}

Javascript - 这与我在代码中所做的类似。

var targetOffset, currentPosition,
    body = document.body,
    button = document.getElementById('scrollButton'),
    animateTime = 900;

function getPageScroll() {
  var yScroll;

  if (window.pageYOffset) {
    yScroll = window.pageYOffset;
  } else if (document.documentElement && document.documentElement.scrollTop) {
    yScroll = document.documentElement.scrollTop;
  } else if (document.body) {
    yScroll = document.body.scrollTop;
  }
  return yScroll;
}

button.addEventListener('click', function (event) {

  targetOffset = document.getElementById(event.target.hash.substr(1)).offsetTop;
  currentPosition = getPageScroll();

  body.classList.add('in-transition');
  body.style.WebkitTransform = "translate(0, -" + (targetOffset - currentPosition) + "px)";
  body.style.MozTransform = "translate(0, -" + (targetOffset - currentPosition) + "px)";
  body.style.transform = "translate(0, -" + (targetOffset - currentPosition) + "px)";

  window.setTimeout(function () {
    body.classList.remove('in-transition');
    body.style.cssText = "";
    window.scrollTo(0, targetOffset);
  }, animateTime);

  event.preventDefault();

}, false);

附加的图像是我期待的滚动。它仅重新绘制滚动条而非内容。

Answer 1

我错过了转换：我的滚动中的translateZ（0）。