【页面效果】视觉滚动差

实现思路

html结构

    <div class="bg"><span>hello</span></div>

css样式

* {margin: 0;padding: 0;
}
body{/* 200%窗口高度*/height: 200vh;
}
.bg {height: 200vh;background-image: url('https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg');/* 对图片设置定位 */background-position: 50% 50%;/* 对图片进行剪切，保持原本比例 */background-size: cover;text-align: center;font-size: 400px;font-weight: 900;/* 相对定位 */position: relative;/* 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字以外的区域全部裁掉 */-webkit-background-clip: text;/* 文字变成镂空 */-webkit-text-fill-color: transparent;overflow: hidden;padding-top: 100px;
}
.bg::before{content: "";position: absolute;top:0;left: 0;bottom: 0;right: 0;z-index: -99;/* 背景图片继承父元素 */background-image: inherit;background-size: cover;background-position: 50% 50%;
}

js代码

    // 获取背景对象let bg=document.querySelector('.bg')// 监听滚轮事件document.addEventListener('scroll',function(){let scrollY=window.scrollYif(scrollY!=0){bg.style.backgroundPosition="calc("+scrollY+"px) calc("+scrollY+"px)"}else{bg.style.backgroundPosition=""}})