如何使用 JavaScript 将 div 的高度转换为 100% 值

Question

我有一个 div，我想应用 CSS 转换 scale 属性并根据父 div 的滚动条使用动态值位置。

假设我有一个 div 和一个 id called #circle that has a parent div called #main. I want to find the #main div's height and divide it by 100 to create a dynamic value. Using this dynamic value, I want to animate the #circle div on scroll event。因此，当用户位于 #main div 的顶部时，#circle 缩放为零，当用户滚动到 main div, 圆的缩放值为 100%.

这里是jsFiddle.

Answer 1

您可以使用 offsetHeight 属性来获取元素的高度。

例如。 document.getElementById("circle").offsetHeight

Answer 2

目前您的滚动容器实际上是 html 元素本身。因此，根据它的 scrollTop、scrollHeight 和可见高度，即 window.innerHeight，我们可以计算出 circleScale 值。所有这些部分都在 scrollLogic() 函数中处理。

const circle = document.getElementById('circle');
const html = document.documentElement;
document.body.onscroll = () => {
  const circleScale = scrollLogic();
  circle.style.transform = `scale(${circleScale})`;
};

const scrollLogic = () => {
  const scrollTop = html.scrollTop;
  const maxScrollTop = html.scrollHeight - window.innerHeight;
  const scrollFraction = scrollTop / maxScrollTop;
  const circleScale = Math.min(
    1,
    scrollFraction+0.1
  );
  return circleScale
};

* {
  box-sizing: border-box;
  margin: 0;
  padding:0;
}



#main {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
  border: 3px solid green;
  overflow: scroll;
}

#circle {
  width: 200px;
  height: 200px;
  background-color: red;
  transform: scale(0.1);
  border-radius: 50%;
}

.spacing {
  height: 150vh;
}

<section id="main">
  <div id="circle"></div>
  <div class="spacing"></div>
</section>

Edit - 要使 main 成为 滚动容器 ，它需要一定的固定高度，以便 spacing 的高度 150vh 会导致 main 的高度 80vh 溢出。然后 scroll 事件和计算将发生在 main 本身。但也要记住，现在由于 main 本身正在滚动，circle 的 感知位置 也会发生变化，并且随着它的规模增加，其中一些会被 main 容器的顶部砍倒。

const circle = document.getElementById('circle');
const html = document.documentElement;
const main = document.getElementById('main');
main.onscroll = () => {
  const circleScale = scrollLogic();
  circle.style.transform = `scale(${circleScale})`;
};

const scrollLogic = () => {
  const scrollTop = main.scrollTop;
  const maxScrollTop = main.scrollHeight - main.offsetHeight;
  const scrollFraction = scrollTop / maxScrollTop;
  const circleScale = Math.min(
    1,
    scrollFraction+0.1
  );
  return circleScale
};

* {
  box-sizing: border-box;
  margin: 0;
  padding:0;
}



#main {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
  border: 3px solid green;
  height:80vh;
  overflow: scroll;
}

#circle {
  width: 200px;
  height: 200px;
  background-color: red;
  transform: scale(0.1);
  border-radius: 50%;
}

.spacing {
  height: 150vh;
}

<section id="main">
  <div id="circle"></div>
  <div class="spacing"></div>
</section>

如何使用 JavaScript 将 div 的高度转换为 100% 值

How to convert the height of a div to 100% value using JavaScript

html

javascript

css

scroll