Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Does not work in a scrollable box when a window doesn't have scrolls

See original GitHub issue

I have a relatively positioned element, and it’s scrollable:

import React, { Component } from 'react';
import styles from './styles.scss';

export default class Whatever extends Component {
  renderSections() {
    // outputting many elements, so the parent element's content overflows

  render() {
    <div className={}
        onEnter={() => console.log('YAYAY!')} />

And the stylesheet is simply:

.box {
  position: relative;
  margin: 30px 0;
  padding: 0 6px 20px;
  border: 6px solid white;

  @media (min-width: 1024px) {
    height: 60vh;
    min-height: 400px;
    max-height: 1000px;
    overflow-y: scroll;

On small screens (less than 1024px), the element that contains a Waypoint instance doesn’t have scrolls, it’s fully visible. What overflows is window. And in this case, Waypoint fires the onEnter callback properly. But on bigger screens, the window normally doesn’t have scrolls (at least it’s very unlikely), and only .box element is scrollable. What happens in this situation can be described in few steps:

  1. Since the Waypoint is at the very bottom, a user expects the onEnter callback function to be fired when they scrolls to the very bottom (live example: an EULA text that is required to be fully “read”).
  2. User scrolls to the very bottom of the scrollable .box, but the event doesn’t get fired.
  3. Once user has resized the window, the event starts firing properly, no matter how many times user scrolls to the very bottom.

Another interesting case is when HMR is working:

  1. A developer loads the page, scrolls to the very bottom of .box, nothing happens.
  2. Developer changes the component code, so the component gets remounted and rendered again.
  3. Starting from when the component has been remounted, Waypoint works properly, with all events getting fired as they should.

The version I’m using is 2.0.2, the latest as of today. Nothing really special isn’t happening around the .box element and corresponding component.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:8

github_iconTop GitHub Comments

jamespleasecommented, Jun 3, 2016

@taxigy if you make a page reproducing this I’d be happy to help debug it.

trotzigcommented, Jul 1, 2016

I’m closing this based on above discussion. Feel free to reopen if you end up seeing this again @taxigy. And thanks @jmeas for helping me keep the list of open issues down to a minimum!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why css "overflow: scroll" doesn't work and the scroll bar ...
overflow : scroll , will only work and visible if you have fixed the size of the box and the content inside the...
Read more >
Can't Scroll in Excel? Here Are Reasons and Easy Fixes!
You cannot scroll in Excel? Here are four different potential reasons and simple solutions! Try these and you will be able to scroll...
Read more >
Show scroll bars in Word or Excel - Microsoft Support
Right-click the title bar of the app window, and then click Maximize. Right-click the title bar again, and then click Restore.
Read more >
How to Use Scroll Panes - Oracle Help Center
This Swing Java Tutorial describes developing graphical user interfaces (GUIs) for applications and applets using Swing components.
Read more >
Two Finger Scroll Not Working Windows 10 (Fixed)
Users have been reporting that two finger scroll is not working on Windows ... Here, make sure that the box next to Drag...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found