css 使用JS侦听器计算元素高度

qq24tv8q 于 2023-01-27 发布在其他

关注(0)|答案(1)|浏览(110)

我一直致力于苹果风格的图像序列滚动器从codepen：https://codepen.io/jasprit-singh/pen/LYxzQjB
我希望JS将滚动高度基于一个div，它是画布的父级，这样我就可以在这一节之前和之后有内容，而不会在它进入视口之前起作用。
我认为const html = document.documentElement;是问题所在，因为它阅读的是<html>的全部内容，而不是我想要选择的父div。但是，我不知道如何更改它。
我试过用const html = document.getElementById("wrap1");替换const html = document.documentElement;，但这只是停止一切工作，没有控制台错误。
我做错了什么/我需要改变什么？
先谢了！

const html = document.documentElement;

const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");

const frameCount = 148;

const currentFrame = index =>
  (`https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index.toString().padStart(4, '0')}.jpg`);

const preloadImages = () => {
  for (let i = 1; i < frameCount; i++) {
    const img = new Image();
    img.src = currentFrame(i);
  }
};
const img = new Image();
img.src = currentFrame(1);

canvas.width = 1158;
canvas.height = 770;

img.onload = function() {
  context.drawImage(img, 0, 0);
};
const updateImage = index => {
  img.src = currentFrame(index);
  context.drawImage(img, 0, 0);
}

window.addEventListener('scroll', () => {
  const scrollTop = html.scrollTop;
  const maxScrollTop = html.scrollHeight - window.innerHeight;

  const scrollFraction = scrollTop / maxScrollTop;
  const frameIndex = Math.min(frameCount - 1, Math.ceil(scrollFraction * frameCount));

  requestAnimationFrame(() => updateImage(frameIndex + 1));
});
preloadImages();

#wrap1 {
  position: relative;
  z-index: 1;

  margin: 0;
  padding: 0;

  background: #000;
}

#wrap {
  height: 500vh;
}

canvas {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100vw;
  max-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="wrap1" id="wrap1">
  <div class="wrap" id="wrap">
    <canvas id="hero-lightpass"></canvas>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/75173222/calculate-height-of-element-using-js-listener

1条答案

按热度按时间

hwamh0ep1#

从我自己的Angular 来看，首先，我们可以将overflow-y: auto添加到父对象中，然后我们可以将const html = document.documentElement;更改为您提到的父对象（const html = document.getElementById("wrap1");），然后我们还需要将scroll侦听器添加到父对象中：将window.addEventListener('scroll', () => {更改为html.addEventListener('scroll', () => {。完成所有这些操作后，图像动画应该基于父滚动条工作，如下所示：

const html = document.getElementById("wrap1");

const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");

const frameCount = 148;

const currentFrame = index =>
  (`https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index.toString().padStart(4, '0')}.jpg`);

const preloadImages = () => {
  for (let i = 1; i < frameCount; i++) {
    const img = new Image();
    img.src = currentFrame(i);
  }
};
const img = new Image();
img.src = currentFrame(1);

canvas.width = 1158;
canvas.height = 770;

img.onload = function() {
  context.drawImage(img, 0, 0);
};
const updateImage = index => {
  img.src = currentFrame(index);
  context.drawImage(img, 0, 0);
}

html.addEventListener('scroll', () => {
  const scrollTop = html.scrollTop;
  const maxScrollTop = html.scrollHeight - window.innerHeight;

  const scrollFraction = scrollTop / maxScrollTop;
  const frameIndex = Math.min(frameCount - 1, Math.ceil(scrollFraction * frameCount));

  requestAnimationFrame(() => updateImage(frameIndex + 1));
});
preloadImages();

#wrap1 {
  z-index: 1;
  margin: 0;
  padding: 0;
  background: #000;
  overflow-y: auto;
  max-height: 100vh;
}

#wrap {
  height: 500vh;
}

#wrap2 {
  position: relative;
}

canvas {
  position: absolute;
  max-width: 100%;
  max-height: 100vh;
  top: 50%;
  pointer-events: none;
  transform: translate(calc(-50% - 20px), -50%); /* add scrollbar width 20px so that it's visible */
  left: 50%;
}

body {
  margin: 0;
}

<div id="wrap2">
  <div class="wrap1" id="wrap1">
    <div class="wrap" id="wrap">
      <canvas id="hero-lightpass"></canvas>
    </div>
  </div>
</div>

注意：我也添加和删除了一些CSS，以便它看起来与代码片段相似。

赞(0）回复(0）举报 2023-01-27

我来回答

css 使用JS侦听器计算元素高度

1条答案

相关问题

热门标签

最新问答