【页面效果】视觉滚动差

实现思路

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.scrollY
      if(scrollY!=0){
        bg.style.backgroundPosition="calc("+scrollY+"px) calc("+scrollY+"px)"
      }
      else{
        bg.style.backgroundPosition=""
      }
    })