Как сделать такой эффект скролла в блоке?

Для создания эффекта скролла в блоке с помощью JavaScript можно использовать несколько подходов. Рассмотрим два наиболее популярных метода:

1. Использование CSS свойств overflow и scrollTop:
Вариант 1:
HTML:

   <div id="block" style="height: 500px; overflow: auto;">
     <div id="content" style="height: 1000px;"></div>
   </div>

JavaScript:

   var block = document.getElementById("block");
   var content = document.getElementById("content");
   
   block.addEventListener("scroll", function() {
     var y = block.scrollTop / (content.scrollHeight - block.offsetHeight);
     // Используйте y для применения нужного вам эффекта к контенту внутри блока
   });

В данном примере блок block имеет фиксированную высоту, установленное свойство overflow: auto создает полосу прокрутки в случае, если содержимое блока превышает его высоту. Событие scroll слушает изменения прокрутки блока, и при каждом изменении высчитывает текущую позицию y (от 0 до 1), где 0 - начало блока, а 1 - его конец.

Вариант 2:
HTML:

   <div id="block" style="height: 500px; overflow: hidden;">
     <div id="content" style="height: 1000px;"></div>
   </div>

JavaScript:

   var block = document.getElementById("block");
   var content = document.getElementById("content");
   
   block.addEventListener("scroll", function() {
     var y = block.scrollTop / (content.scrollHeight - block.offsetHeight);
     // Используйте y для применения нужного вам эффекта к контенту внутри блока
   });

В данном случае блок block также имеет фиксированную высоту, но на этот раз используется свойство overflow: hidden, чтобы полоса прокрутки не отображалась. Далее, событие scroll также отслеживает изменения прокрутки блока и вычисляет текущую позицию y.

Используя значение y, вы можете применить требуемый эффект к контенту внутри блока.

2. Использование JavaScript библиотек:
Если вам необходимы более сложные или динамические эффекты, то вы можете использовать готовые JavaScript библиотеки, такие как jQuery или ScrollMagic.

jQuery:

   $(document).ready(function() {
     $("#block").scroll(function() {
       var y = $(this).scrollTop() / ($("#content").outerHeight() - $(this).outerHeight());
       // Используйте y для применения нужного вам эффекта к контенту внутри блока
     });
   });

В данном случае мы используем библиотеку jQuery для упрощения процесса получения элементов и слушания событий. Функция scroll вызывается при изменении прокрутки и вычисляет текущую позицию y.

ScrollMagic:

   var controller = new ScrollMagic.Controller();
   var blockScene = new ScrollMagic.Scene({
     triggerElement: "#block",
     triggerHook: "onEnter",
     duration: document.getElementById("content").offsetHeight - document.getElementById("block").offsetHeight
   })
   .setPin("#block")
   .on("progress", function(event) {
     // Используйте event.progress для применения нужного вам эффекта к контенту внутри блока
   })
   .addTo(controller);

ScrollMagic - мощная JavaScript библиотека для создания анимаций и взаимодействия на основе скролла. В этом примере мы использовали функционал ScrollMagic для создания привязки блока к верхней позиции экрана (setPin("#block")) и слежения за прогрессом скролла (on("progress", function(event) {...}) для применения эффектов к контенту внутри блока.

Обратите внимание, что приведенные примеры демонстрируют основные подходы и могут быть дополнены дополнительными логикой и функционалом для достижения конкретного требуемого поведения.