search

willmcpo / body-scroll-lock

Body scroll locking that just works with everything 😏
MIT License
4.04k stars 337 forks source link

Target only scrolls when using two fingers #125

Open limaneto opened 5 years ago

limaneto commented 5 years ago

Hi, the approach using querySelector works, but when I use the ref approach, the target scrolls starts only using two fingers. Thanks for the lib by the way.

` class App extends Component { render() { return (

);

} }

class Content extends Component { targetRef = React.createRef(); targetElement = null; componentDidMount() { this.targetElement = this.targetRef.current; } disableScroll = event => { event.preventDefault(); disableBodyScroll(this.targetElement); }; render() { return (

)

} }

class List extends Component { render() { return ( <div className="Square" style={{ WebkitOverflowScrolling: 'touch' }}> <div className="Line" style={{ backgroundColor: 'yellow' }}>

<div className="Line" style={{ backgroundColor: 'white' }}>

    <div className="Line" style={{ backgroundColor: 'grey' }}></div>
    <div className="Line" style={{ backgroundColor: 'red' }}></div>
    <div className="Line" style={{ backgroundColor: 'white' }}></div>
    <div className="Line" style={{ backgroundColor: 'white' }}></div>
    <div className="Line" style={{ backgroundColor: 'yellow' }}></div>
    <div className="Line" style={{ backgroundColor: 'white' }}></div>
    <div className="Line" style={{ backgroundColor: 'grey' }}></div>
    <div className="Line" style={{ backgroundColor: 'white' }}></div>
    <div className="Line" style={{ backgroundColor: 'white' }}></div>
    <div className="Line" style={{ backgroundColor: 'red' }}></div>
    <div className="Line" style={{ backgroundColor: 'white' }}></div>
    <div className="Line" ></div>
    <div className="Line" style={{ backgroundColor: 'white' }}></div>
    <div className="Line" style={{ backgroundColor: 'white' }}></div>
    <div className="Line" style={{ backgroundColor: 'red' }}></div>
    <div className="Line" style={{ backgroundColor: 'white' }}></div>
  </div>
)

} }

// CSS body { height: 10000px; } .App { text-align: center; } .App-header { overflow: auto; position: fixed; left: 0; width: 100%; background-color: #282c34; min-height: 100vh; font-size: calc(10px + 2vmin); color: white; } .Square { position: fixed; overflow: auto; height: 100%; width: 100%; background-color: pink; margin: 20px auto; } .Button { height: 50px; width: 100px; } .Line { height: 50px; width: 100%; } `