Inertia Scrolling Issue

Design help Custom code
1

Hey folks,

So i’m having an issue with a prototype i’m working on. I’ve added a smooth inertia scroll using GSAP. But i figured out when you open the last tab (try to open the latest tab on the page), the scroll container doesn’t recalculate, so you can’t scroll at the bottom of the page…

Any help would be much appreciated if any of you had the same issue or a workaround!

You can see the prototype here : http://dlj-prototype.webflow.io/

Here is the custom css added :
*, :after, :before {
box-sizing: border-box;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
}

.scroll-container {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

And here is the custom javascript :

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js" type="text/javascript"></script>

<script>

  
var html = document.documentElement;
var body = document.body;

var scroller = {
  target: document.querySelector("#scroll-container"),
  ease: 0.05, // <= scroll speed
  endY: 0,
  y: 0,
  resizeRequest: 1,
  scrollRequest: 0,
};

var requestId = null;

TweenLite.set(scroller.target, {
  rotation: 0.01,
  force3D: true
});

window.addEventListener("load", onLoad);

function onLoad() {    
  updateScroller();  
  window.focus();
  window.addEventListener("resize", onResize);
  document.addEventListener("scroll", onScroll); 
}

function updateScroller() {
  
  var resized = scroller.resizeRequest > 0;
    
  if (resized) {    
    var height = scroller.target.clientHeight;
    body.style.height = height + "px";
    scroller.resizeRequest = 0;
  }
      
  var scrollY = window.pageYOffset || html.scrollTop || body.scrollTop || 0;

  scroller.endY = scrollY;
  scroller.y += (scrollY - scroller.y) * scroller.ease;

  if (Math.abs(scrollY - scroller.y) < 0.05 || resized) {
    scroller.y = scrollY;
    scroller.scrollRequest = 0;
  }
  
  TweenLite.set(scroller.target, { 
    y: -scroller.y 
  });
  
  requestId = scroller.scrollRequest > 0 ? requestAnimationFrame(updateScroller) : null;
}

function onScroll() {
  scroller.scrollRequest++;
  if (!requestId) {
    requestId = requestAnimationFrame(updateScroller);
  }
}

function onResize() {
  scroller.resizeRequest++;
  if (!requestId) {
    requestId = requestAnimationFrame(updateScroller);
  }
}
  
  const tabBtn = document.querySelectorAll('.dpdp');
  for (var i = 0; i < tabBtn.length; i++) {
    tabBtn[i].addEventListener('click',  function(event) {
      scroller.resizeRequest++;
    });
  }
  
</script>

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

The problem is that when you open the modal, the scrollHeight of your page is not being updating. That basically means that the page doesn’t know that there’s more stuff to show once the tab is expanded.

You need to call this function here whenever you open/close a tab that expands/hides content in the page:

onResize()

Something like this:

$('.services-list-container').click(function(){
onResize()
})

You need to adjust it so it can work with the timings you have set up in Webflow

1 Like
3

Hey @Jeandcc

Thanks for the reply! So i’ve actually tried to add the following code already :

let dropdownTab = document.querySelectorAll('.dpdp');
 for (var i = 0 ; i < dropdownTab.length; i++) {
   dropdownTab[i].addEventListener('click' , onResize() ) ; 
 }

But the issue remains the same… That’s what i don’t understand. I’ve also tried to add it on the “.dropdown-tab” class also (so the whole dropdown element), but it doesn’t work neither

1 Like