Kevin Powell - Community•12mo ago

Disabling page scroll during page load and using Lenis smooth scroll

I want to disable scrolling during page load and also have Lenis smooth scroll on my website. I have the code below to prevent scrolling during page load. The problem is that if I scroll during the page load, after the page load ends, the page jumps to the extent of the scroll. Does anyone know how can I solve this problem?

<style>
/* LENIS CODE */
html { scroll-behavior: initial; }
html, body { width: 100%; height: auto !important; min-height: 100%; }
</style>

<!-- Disable scrolling during page load + Lenis Smooth Scrolling -->
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js"></script>
<script>
let lenisEnabled = true;

$(document).ready(function() {
  $('body').addClass('disable-scroll');
  lenisEnabled = false; // Disable Lenis smooth scrolling
  setTimeout(function() {
    $('body').removeClass('disable-scroll');
    lenisEnabled = true; // Enable Lenis smooth scrolling
  }, 5800);
});

// LENIS CODE
const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  direction: "vertical",
  gestureDirection: "vertical",
  smooth: true,
  mouseMultiplier: 1,
  smoothTouch: false,
  touchMultiplier: 2,
  infinite: false
});

function raf(time) {
  if (lenisEnabled) {
    lenis.raf(time);
  }
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
</script>

<style>
/* LENIS CODE */
html { scroll-behavior: initial; }
html, body { width: 100%; height: auto !important; min-height: 100%; }
</style>

<!-- Disable scrolling during page load + Lenis Smooth Scrolling -->
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js"></script>
<script>
let lenisEnabled = true;

$(document).ready(function() {
  $('body').addClass('disable-scroll');
  lenisEnabled = false; // Disable Lenis smooth scrolling
  setTimeout(function() {
    $('body').removeClass('disable-scroll');
    lenisEnabled = true; // Enable Lenis smooth scrolling
  }, 5800);
});

// LENIS CODE
const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  direction: "vertical",
  gestureDirection: "vertical",
  smooth: true,
  mouseMultiplier: 1,
  smoothTouch: false,
  touchMultiplier: 2,
  infinite: false
});

function raf(time) {
  if (lenisEnabled) {
    lenis.raf(time);
  }
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
</script>

4 Replies

Ayush shah•12mo ago

Try overflow hidden by default and then as its loaded remove it

MarkBoots•12mo ago

i think you're already done if you move the first line inside the document ready function outside of the function. so it will immediately set the disable-scroll class on the body (before ready). or you set the class .disable-scroll on the body yourself (in the html) i don't see the css of that though, something like this should prevent it

body.disable-scroll {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

body.disable-scroll {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

//directly disable scroll and lenis
$('body').addClass('disable-scroll');
lenisEnabled = false;

//on document ready, enable scroll and lenis
$(document).ready(function() {
    $('body').removeClass('disable-scroll');
    lenisEnabled = true
};

//directly disable scroll and lenis
$('body').addClass('disable-scroll');
lenisEnabled = false;

//on document ready, enable scroll and lenis
$(document).ready(function() {
    $('body').removeClass('disable-scroll');
    lenisEnabled = true
};

Happy_Happy•12mo ago

Thank you very much, Mark! Your solution worked great! The only issue is that even after I reload the page, and the page load does not play in the same session, the delay in the scroll continues to be present. Is there any way I can turn off the scroll delay after the fist load?

MarkBoots•12mo ago

don't know where the loading comes in, but you can try using sessionstorage.

if(!sessionStorage.getItem("activeSession")){
  /* if there is not an active session, set it for the next time */
  sessionStorage.setItem("activeSession", true)
  /* do the loading thing here */
}

if(!sessionStorage.getItem("activeSession")){
  /* if there is not an active session, set it for the next time */
  sessionStorage.setItem("activeSession", true)
  /* do the loading thing here */
}

ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Gaming

Programming

Disabling page scroll during page load and using Lenis smooth scroll