Gatsby: scroll events

[alexandor3x]

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.

import React, { Component } from 'react'

export default class MyComponent extends Component {
    constructor() {
        super()
        this._handleScroll = this._handleScroll.bind(this);
      }

  _handleScroll(e) {
    console.log('scrolling')
  }
  componentDidMount() {
    window.addEventListener('scroll', this._handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this._handleScroll);
  }



  render() {
      console.log("render")
    const style = {
      width: '1000px',
      height: '1000px',
      overflowY: 'hidden'
    }
    const innerDiv = {
      height: '3000px',
      width: '1000px',
      background: '#efefef'
    }
    return (
      <div style={style} onScroll={this._handleScroll}>
        <div style={innerDiv}> 
            <button onClick={()=>console.log("btn press")} >clickme</button>
        </div>
      </div>
    )
  }
}

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.

[kakadiadarpan]

Can you provide your environment information by running gatsby info --clipboard and provide the result of that?

[alexandor3x]

hello, this is the example on react, gatby v1 y gatsby v2

1. React

Code :

Result:

1. Gatsby V1 (using starter : https://github.com/gatsbyjs/gatsby-starter-hello-world)

Code :

Result (no scroll events):

Info :

1. Gatsby V2 (using starter : https://github.com/gatsbyjs/gatsby-starter-hello-world#v2)

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.

[DSchau]

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!

[craig1123]

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);

[jonniebigodes]

@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.

[jmknoll]

@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.

[chaance]

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.

[kaueburiti]

@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.

[kaueburiti]

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.

[thisisbenmanley]

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