仅在滚动条上需要绘画闪烁答案

【问题标题】：Paint Flashing only on scrollbar required仅在滚动条上需要绘画闪烁
【发布时间】：2018-02-08 23:27:25
【问题描述】：

我正在尝试删除闪烁的油漆，但它确实会重新绘制整个文档。 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);

附加的图像是我在滚动时所期望的。它只重绘滚动条而不是内容。

【问题讨论】：

标签： javascript html css google-chrome browser

【解决方案1】：

我的滚动条上缺少转换：translateZ(0)。

【讨论】：