文章预览
滚动进度条 创建一个指示页面滚动百分比的进度条。 使用 position: fixed 和一个较大的 z-index 值将元素放置在页面顶部,高于任何内容。 使用 EventTarget.addEventListener() 和 Element.scrollTop 确定文档的滚动百分比,并将其应用于元素的 width 。 < div id = "scroll-progress" > div > body { min-height : 200vh ; } #scroll-progress { position : fixed; top : 0 ; width : 0% ; height : 4px ; background : #7983ff ; z-index : 10000 ; } const scrollProgress = document .getElementById( 'scroll-progress' ); const height = document .documentElement.scrollHeight - document .documentElement.clientHeight; window .addEventListener( 'scroll' , () => { const scrollTop = document .body.scrollTop || document .documentElement.scrollTop; scrollProgress.style.width = ` ${(scrollTop / height) * 100}%`; }); 这个技巧创建了一个交
………………………………
