Closed alexandor3x closed 6 years ago
Can you provide your environment information by running gatsby info --clipboard
and provide the result of that?
hello, this is the example on react, gatby v1 y gatsby v2
Code :
Result:
Code :
Result (no scroll events):
Info :
Code :
Result (no scroll events):
Info :
I was testing this semantic ui layout in gatsby: http://react.semantic-ui.com/layouts/homepage
but, there is no scroll events for using Visibility Component.
I was unable to reproduce this.
Here's an example of scroll events firing like you'd expect
In particular, check out the scrollable component
Like you said, it's possible that this is some issue with Semantic UI, but it seems unlikely this is an issue with Gatsby.
Going to close this, but please re-open when you can reproduce this. We'd love to help!
I couldn't get window working
window.addEventListener('scroll', this.handleScroll);
So I used the document.body
and it worked
document.body.addEventListener('scroll', this.handleScroll);
@craig1123 when you use the window
object always do a sanity check to see if it's not null, this will prevent some issues that might pop up in the future, This because the object is not available.
My approach when i have to touch the window object is always the following:
componentDidMount() {
if (typeof window !== 'undefined') {
this.handleWindowSizeChange() // Set width
window.addEventListener('scroll', this.handleScroll)
}
}
// make sure to remove the listener
// when the component is not mounted anymore
componentWillUnmount() {
if (typeof window !== 'undefined') {
window.removeEventListener('scroll', this.handleScroll)
}
}
With this i'm able to circumvent most of the problems, for this particular case you could even optimize it with lodash.debounce for a better handle on the scrolling.
@alexandor3x Just to confirm, this seems to be an issue with semantic.css, not with gatsby. Scroll events weren't working for me until I removed semantic-ui.
Leaving this in case anyone encounters a similar issue, @jmknoll noted an issue with semantic.css, which gave me a feeling that it may have been applying overflow-x: hidden
to the root html element, which will break scroll events. Ran into a similar issue myself. Move the overflow declaration to your body
selector instead and you should be good if that's your issue.
@chancestrickland this is very strange 🤔 I have looked at my html element and no overflow-x: hidden
is applied to it, but I still have problems with the scroll, specially in mobile it becomes very stucked, slow.
And I just have to remove the semantic.css file to work perfectly!
So, this is really not a problem with gatsby, but can we assume that is probably a problem in some interaction between Gatsby and Semantic? I believe that if the problem was just the Semantic, someone would already noticed that or even fixed.
I just fixed the problem adding the following rule to my own css:
body {
overflow-x: initial;
}
Basically the overflow-x: hidden
mentioned by @chancestrickland still break the scroll events (and the scroll experience in mobile devices) even if applied to the body element.
I should search more about this issue, but in the quick search that I did a lot of libraries has problems with this kind of rule. The solution normally is remove the overflow-x: hidden
or event removing the height: 100%
from body/html elements.
removing the
height: 100%
from body/html elements.
@kaueburiti Not using Gatsby (using create-react-app, etc.) but this did it for me. Removed height: 100%
on my application's outermost div
I have this component, and if i use this in pure react, the events are fired, but in gatsby (v1 and v2) the events doesn´t fire.
Can you help me, i'm working with semantic ui events and i think some events doesn´t works because of this,
PD://Sorry my bad english.