Calling disableBodyScroll scrolls to the top on the first time and removes scroll listener about body-scroll-lock HOT 7 CLOSED

Hi @gabsschneider

The package listens for touchmove events. Once the page scrolls to the top/bottom, preventDefault is called in the touchmove listener, which I suspect is stopping your window scroll event listener from executing.

A possible way to resolve this is to pass your window scroll event listener as a parameter into the disableBodyScroll function, so that it gets called before preventDefault is called.

Would this approach be usable for your case?

from body-scroll-lock.

@willmcpo thank you for the reply.

Yes, I think your solution would be usable. But for me to pass the listener as a parameter you would have to update the code for the disableBodyScroll function, right?

from body-scroll-lock.

@willmcpo I figured out what is going on.

The problem is that whenever my body's overflow property is set to auto it causes some sort of issue with the scroll properties. For instance, if overflow: auto, calling window.scrollTo(left, top) doesn't work, not even a listener for the scroll event gets called. I don't have a lot of experience in web development so I don't know why this is happening. If you could share some thoughts about it would be great. I'm going to keep investigating this issue and maybe post a question on stackoverflow.

That being said, I don't believe this is a problem with your package in particular.

from body-scroll-lock.

Can you share some code @gabsschneider so I can get a better picture of what's going on in your use case?

from body-scroll-lock.

Absolutely @willmcpo

I'm using React to build my website so my index.html looks exactly like the template one. I've been trying to paste some code here but it doesn't get formatted well and sometimes it just doesn't show up, so I will try to explain and paste some chuncks of it.

Since I'm using React, in my index.js file I render my App class which holds all my application. In the App.js render, I have a lot of content that overflows and a Menu component that I created, which basically is rendered on top of everything with a fixed position. That is why I wanted to lock the scroll, so I could show my menu and prevent the user to scroll the rest of the page when it is visible.

When my app mounts I add an event listener for the scroll so I can do some logic for the interface components. `

App.js:

 componentDidMount() {
 	window.addEventListener('scroll', this.handleScroll)
 	window.addEventListener('mousewheel', this.handleMouseWheel)
 }
 
 componentWillUnmount() {
 	window.removeEventListener('scroll', this.handleScroll)
 	window.removeEventListener('mousewheel', this.handleMouseWheel)
 }
 
 handleMouseWheel = (event) => {
 	console.log('mousewheel')
 }
 
 handleScroll = (event) => {
 	console.log('scroll')
 }

This is my app's css:

html,
body,
#root {
	width: 100%;
	height: 100vh;
    display: block;
}

#root { 
	//overflow: auto;
}

.app {
	width: 100%;
	height: 100%;
	background-color: #f9f9f9;
	background-color: white;
	//overflow: hidden;
}

.app .content {
	width: 100%;
}

And on my menu class, when menu property visible is set to true, it disables the body scroll and then it gets rendered on top of whatever was being shown. When the property goes back to false, it enables the body scroll again and hides the menu

Menu.js:

componentDidMount() {
	this.targetElement = document.querySelector('#menu')
}

componentWillReceiveProps(nextProps) {
	if(this.menu && nextProps.visible !== this.props.visible) {
		if(nextProps.visible) {
			disableBodyScroll(this.targetElement)
			return
			
			setTimeout(() => {
				document.body.style.overflow = 'hidden';
   				document.documentElement.style.overflow = 'hidden';
			}, 250)				
		}
		else {
			enableBodyScroll(this.targetElement)
			return

			document.body.style.overflow = 'visible';
    		        document.documentElement.style.overflow = 'visible';
		}
	}
}

componentWillUnmount() {
	clearAllBodyScrollLocks()
}

The problem is that when I call enableBodyScroll after disableBodyScroll, my listener for the scroll event stops working, but for the mousewheel event it continues working fine. Also, I can no longer use window.scrollTo(left, top) after enabling the body scroll. What I noticed is that when I use the enableBodyScroll method it sets the body's overflow to auto, and that is what causes the problem.

As you might have noticed, I was experimenting with setting different values to the overflow style to see what is what. If I set the overflow to visible and not auto whenever I want to unlock the body scroll, my listener continues to work properly, and so does using the scrollTo() method. But on the downside, everytime I lock the body scroll by setting overflow to hidden I lose my scroll position and the pages come back to the top. I managed to get around this by saving the scroll position and scrolling back to that position whenever I unlock the scroll, but that's not an ideal solution.

I did some digging and it appears that some others have faced this issue and solved it by changing the height of the body to 100% or 100vh, but in my case none of this solutions worked. What seems to be the problem is overflow: auto causing some issues with the scroll methods as I mentioned.

from body-scroll-lock.

Hey @gabsschneider

Can you see if #11 helps?

yarn add [email protected]

Basically I restore the original overflow setting instead of forcing it to auto on enableBodyScroll

from body-scroll-lock.

im also not sure why the body scroll position would reset...hmm

from body-scroll-lock.