javascript - Easing effect on scroll - Stack Overflow

admin管理员组

文章数量:1386662

I have been learning css and javascript these few days and came across a scrolling effect it this website(/). I am not even sure how this effect is called so I have no success on googling it.

Could I ask how is this achieved? Or how is this called?

Thank you

I have been learning css and javascript these few days and came across a scrolling effect it this website(https://jnby.jp/). I am not even sure how this effect is called so I have no success on googling it.

Could I ask how is this achieved? Or how is this called?

Thank you

• javascript
• html
• css

Share Improve this question Follow asked Mar 4, 2020 at 12:35 Dawn ChanDawn Chan 2311 silver badge33 bronze badges 1

• Wele to stackoverflow, have you tried searching "slow down scrolling javascript" because that brought me to this site: forum.webflow./t/slow-down-scrolling/74950 – Nemoko Commented Mar 4, 2020 at 12:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Wele to SO.

This effect is called Smooth Scroll.

Add the below code before closing the body tag.

 <script>
  if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

function wheel(event) {
    var delta = 0;
    if (event.wheelDelta) delta = event.wheelDelta / 40; //controls the scroll wheel range/speed
    else if (event.detail) delta = -event.detail / 40;

    handle(delta);
    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
}

var goUp = true;
var end = null;
var interval = null;

function handle(delta) {
var animationInterval = 20; //controls the scroll animation after scroll is done
  var scrollSpeed = 20; //controls the scroll animation after scroll is done

if (end == null) {
  end = $(window).scrollTop();
  }
  end -= 20 * delta;
  goUp = delta > 0;

  if (interval == null) {
    interval = setInterval(function () {
      var scrollTop = $(window).scrollTop();
      var step = Math.round((end - scrollTop) / scrollSpeed);
      if (scrollTop <= 0 || 
          scrollTop >= $(window).prop("scrollHeight") - $(window).height() ||
          goUp && step > -1 || 
          !goUp && step < 1 ) {
        clearInterval(interval);
        interval = null;
        end = null;
      }
      $(window).scrollTop(scrollTop + step );
    }, animationInterval);
  }
}
</script> 

The below links will help you to start things.

https://www.w3schools./howto/howto_css_smooth_scroll.asp

https://css-tricks./snippets/jquery/smooth-scrolling/

https://www.cssscript./tag/smooth-scroll/

i am seeking for the same answer. i came up with something like this:

const easeSpeed = 0.1;
let moveDistance = window.scrollY;

window.addEventListener("wheel", e => {
  moveDistance = Math.max(0, Math.min(document.body.scrollHeight - window.innerHeight, window.scrollY + e.deltaY));
})

function animate() {
  requestAnimationFrame(animate);

  const scrollYTo = window.scrollY + (easeSpeed * (moveDistance - window.scrollY));
  window.scrollTo(0, scrollYTo);
}
animate();

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

body {
  overflow: hidden;
}

div {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

div:nth-of-type(1) {
  background-color: darkmagenta;
}

div:nth-of-type(2) {
  background-color: darkcyan;
}

div:nth-of-type(3) {
  background-color: darkblue;
}

<div>
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas magni molestias praesentium placeat quisquam totam modi, error enim, odio, eum doloremque qui modi esse et excepturi dolorem ipsam officia temporibus?
  </p>
</div>
<div>
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas magni molestias praesentium placeat quisquam totam modi, error enim, odio, eum doloremque qui modi esse et excepturi dolorem ipsam officia temporibus?
  </p>
</div>
<div>
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas magni molestias praesentium placeat quisquam totam modi, error enim, odio, eum doloremque qui modi esse et excepturi dolorem ipsam officia temporibus?
  </p>
</div>

which is not perfect. if you find any anything on this topic, please let me know.

Update

after poking around JNBY's website, i think i figured out how they did it.

const easeSpeed = 0.1;
let moveDistance = 0,
  curScroll = 0;

document.addEventListener("scroll", () => {
  moveDistance = window.scrollY
})

const ghostEle = document.createElement("section");
ghostEle.style.height = document.querySelector("main").scrollHeight + "px";
document.querySelector("main").after(ghostEle);

function animate() {
  requestAnimationFrame(animate);

  curScroll = curScroll + (easeSpeed * (moveDistance - curScroll));
  if (curScroll < 0.001) curScroll = 0;
  document.querySelector("main").style.transform = `translateY(${curScroll * -1}px)`
}
animate();

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

main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

div {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

div:nth-of-type(1) {
  background-color: darkmagenta;
}

div:nth-of-type(2) {
  background-color: darkcyan;
}

div:nth-of-type(3) {
  background-color: darkblue;
}

<main>
  <div>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas magni molestias praesentium placeat quisquam totam modi, error enim, odio, eum doloremque qui modi esse et excepturi dolorem ipsam officia temporibus?
    </p>
  </div>
  <div>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas magni molestias praesentium placeat quisquam totam modi, error enim, odio, eum doloremque qui modi esse et excepturi dolorem ipsam officia temporibus?
    </p>
  </div>
  <div>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas magni molestias praesentium placeat quisquam totam modi, error enim, odio, eum doloremque qui modi esse et excepturi dolorem ipsam officia temporibus?
    </p>
  </div>
</main>

本文标签： javascriptEasing effect on scrollStack Overflow