Прокрутка DIV вместо BODY - но проверьте ELEMENTS в VIEWPORT - PullRequest
Новая
       79

Прокрутка DIV вместо BODY - но проверьте ELEMENTS в VIEWPORT

0 голосов
/ 28 мая 2020

Причина проблем с масштабированием с использованием vh (высота области просмотра) в мобильных браузерах. Я установил контейнер div для прокрутки содержимого. Работает отлично. Но теперь я все больше и больше разочаровываюсь в адаптации старой функции, чтобы проверить, помещен ли элемент во вьюпорт ... Цель: постепенное появление и исчезновение фона, участков маркеров и т. Д. во второй строке следующего кода отладчик сообщает: переменная "box" не имеет значения / не будет никакого значения, хотя, вызвав ее в консоли, она найдена. И, кстати, функция под названием goto (простая прокрутка) работает без проблем ...

Вторая проблема: невозможно активировать функцию - не установив ее в тег div в HTML (onscroll), без установки container.onscroll в JS, а не с помощью addEventListener (мой любимый).

Итак, кто-нибудь здесь обнаруживает ошибку?

Прежде всего несколько строки CSS: 

html, body {
height: 100vh;
width: 100vw;
overflow: hidden; 
}

#site {
position: absolute;
overflow: scroll;
}

#container { 
height: 100vh; 
width: 100vw;
}

.overflow {
position: absolute;
overflow-y: auto;
height: 100%;
width: 100%;
}

.bg {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
object-fit: cover;
opacity: 0;
transition: 1.5s ease-in-out;
}

.bg-vp { opacity: 1; }

В HTML это выглядит так: 

<body>
<main id="site">
    <div id="container" class="overflow">
        <img class="bg" src="../1.png">
        <img class="bg" src="../2.png">
        <img class="bg" src="../3.png">
        <section>
             <div class="checkpoint"></div> 
             <h1></h1>
             <article></article>
        </section>
    </div>
</main>

А здесь JS (Контрольные точки - это просто квадраты в CSS маркере раздел): 

 var box = document.getElementById("container");
 var cut_bottom = box.offsetHeight;
 var cut_top = 0;
 var sections = document.getElementsByClassName("checkpoint");
 var backgrounds = document.getElementsByClassName("bg");

 function goto(target) { 
     var anchor = target.offsetTop; 
     $(box).animate({scrollTop: anchor}, anchor*0.4); 
 }

 function checkpoints(x) { 
     var checkpoint = x.offsetTop; 
     return ( checkpoint >= cut_top && checkpoint <= cut_bottom ); 
 }

 function section_marker() {
     for (var s = 0; s < sections.length; s++) {
         if (checkpoints(sections[s])) {
             backgrounds[s].classList.add("bg-vp");
         }
         else { 
             backgrounds[s].classList.remove("bg-vp"); 
         } 
     }
 }

box.addEventListener("scroll", section_marker);

OR:
box.onscroll = function() { section_marker(); };

OR (in HTML):
<div id="container" onscroll="section_marker()">
...