Home>

There are two blocks on the page -when scrolling the page, the first one scrolls as usual, and the second one should scroll slowly. How is this possible?

Please edit the question to reflect the specific problem with enough detail to be able to give an adequate answer.

Дух сообщества2022-01-22 12:47:02
  • Answer # 1
    let last_known_scroll_position= 0;
    let ticking= false;
    function moveHint(scroll_pos) {
      hint.style.setProperty('--top', scroll_pos /8 + "px");
    }
    window.addEventListener('scroll', function(e) {
      last_known_scroll_position= window.scrollY;
      if (!ticking) {
        window.requestAnimationFrame(function() {
          moveHint(last_known_scroll_position);
          ticking=false;
        });
        ticking=true;
      }
    });
    body {
      height: 3000px;
      background: url(https://loremflickr.com/320/240);
      background-size: 100%
    }
    hint {
      --top: 0px;
      position: fixed;
      top: var(--top);
      width: 100px
      height: 100px;
      background: url(https://loremflickr.com/100/100);
    }
    <div id="hint">
  • Answer # 2
    let last_known_scroll_position= 0;
    let ticking= false;
    function moveHint(scroll_pos) {
      hint.style.setProperty('--top', scroll_pos /8 + "px");
    }
    window.addEventListener('scroll', function(e) {
      last_known_scroll_position= window.scrollY;
      if (!ticking) {
        window.requestAnimationFrame(function() {
          moveHint(last_known_scroll_position);
          ticking=false;
        });
        ticking=true;
      }
    });
    body {
      height: 3000px;
      background: url(https://loremflickr.com/320/240);
      background-size: 100%
    }
    hint {
      --top: 0px;
      position: fixed;
      top: var(--top);
      width: 100px
      height: 100px;
      background: url(https://loremflickr.com/100/100);
    }
    <div id="hint">