Эффект параллакса в JS: есть ли формула для модификатора прокрутки, чтобы фоновое изображение и содержание веб -сайта вс ⇐ CSS

[Anonymous]

Позвольте мне начать с пожелания вам прекрасного дня! Основной раздел имеет фоновое изображение и элементы. Высота этих элементов (комбинированная) является переменной, потому что она зависит от размер шрифта пользователя, размера экрана и т. Д. Для тех, кто хочет протестировать его сами или нужно, чтобы ответить на мой вопрос, вот код HTML и CSS: < /p>


document.querySelector("body").onscroll = function() {
const main = document.querySelector("main");
const scrolltotop = document.scrollingElement.scrollTop;

const factor = 0.5; //
* {
margin: 0;
padding: 0;
}

html,
body {
height: 100%;
}

header {
height: 40%;
}

main {
width: 100%;
background-image: url("");
/* * {
width: 25em;
height: 40em;
background: gray;
margin: 2%;
font-size: 150%;
align-content: center;
text-align: center;
color: blue;
}< /code>

Header p content


Main element 1
Main element 2
Main element 3
Main element 4
Main element 5
Main element 6
Main element 7
Main element 8
Main element 9
< /code>
< /div>
< /div>
< /p>
Проблема с этим кодом заключается в том, что он работает, но не так, как мне это нужно. Когда я использую постоянные коэффициенты, такие как 0,5, 0,3, 0,7 и т. Д., Всегда находится белое пространство между фоновым изображением и дном, если вы прокручиваете вниз, либо - и это противоположный эффект - вы не достигаете нижней части изображения, когда вы прокручиваете вниз, отрезаете части. Постоянные факторы работают только для очень конкретных обстоятельств, но я хочу, чтобы они работали везде. Если бы вы могли мне помочь, я бы очень признателен!

Подробнее здесь: https://stackoverflow.com/questions/794 ... o-the-back