油漆只在滾動條上閃爍所需

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）對我的滾動。