Peinture Clignotant uniquement sur la barre de défilement requise

Question

J'essaie d'enlever le solin de peinture, mais il repeint tout le document. 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 - C'est quelque chose de similaire que je fais dans mon code.

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); 

L'image ci-jointe est ce que j'attends de faire défiler. Il repeint uniquement la barre de défilement et non le contenu.

Answer 1

je manque la transformation: translateZ (0) sur mon rouleau.