Happy_Happy Posts - Answer Overflow

Happy_Happy

•Created by Happy_Happy on 11/15/2023 in #front-end

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>

5 replies

Gaming

Programming