我正在嘗試制作一個與瀏覽器中滾動百分比相關(guān)的文本填充顏色的動畫。IE)文本填充隨著滾動百分比從左到右動畫顯示，當你從該部分向上滾動時，它不填充。我對JS不是特別熟悉，但是我見過有人用事件偵聽器這樣做。
我不知道從哪里開始。
您可以使用滾動事件來為您的文字著色。 主要的想法是使用滾動位置來定義有多少單詞需要著色，你可以根據(jù)自己的需要細化著色部分。 正文越大，文本著色越慢。
const HIGHLIGHT = 'class="highlight"';
const TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit libero eu ligula molestie, sed faucibus leo iaculis. Quisque scelerisque ligula in volutpat venenatis. Fusce velit felis, pretium eu varius quis, facilisis eget nunc. Quisque eu eros tellus. Cras condimentum efficitur turpis, ac laoreet velit rhoncus et. Maecenas non lorem auctor dolor auctor gravida ut at diam. Proin eleifend elementum lacus in varius. In dapibus mi ut erat gravida, non dictum nisi luctus. Aliquam imperdiet commodo ante, posuere vestibulum eros mattis vitae. Cras molestie commodo turpis, vitae tempus magna dictum pharetra. Duis quis eros at magna sodales mollis. Fusce sollicitudin purus sit amet est ullamcorper luctus. Donec molestie, nisi quis luctus malesuada, lectus arcu rutrum turpis, ac bibendum libero tellus at metus. Vivamus mattis ultricies metus eu dignissim. Mauris sed consectetur nisl."
let words = TEXT.split(" ");
let text = document.querySelector('.text');
text.innerHTML = words
.map(w => `<span>${w}</span>`)
.join(' ');
window.addEventListener('scroll', () => {
let scroll = getScrollFraction();
let words_highlighted = scroll * words.length;
text.innerHTML = words
.map((w, i) => `<span ${i < words_highlighted ? HIGHLIGHT : ''}>${w}</span>`)
.join(' ');
})
// from https://stackoverflow.com/a/8028584/2931840
//
function getScrollFraction() {
var h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight';
return (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight);
}body {
height: 5000px;
}
.text {
position: fixed;
top: 10px;
}
.highlight {
color: #f00;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<span class="text"></span>
</body>
</html>