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.

Setting Grid containerStyle css left property will break ScrollSync

See original GitHub issue

Imagine you have defined Grid with containerStyle (basically offset 300px)

      <Grid
        containerStyle={{ position: 'absolute', left: 300 }}
        onScroll={onScroll}
        ...
      />

And you would you to synchronize scrollLeft of that Grid with some other component using ScrollSync HOC. The problem is the onScroll event will cease to be triggered after some srollLeft is reached because of following line.

const scrollLeft = Math.min(Math.max(0, totalColumnsWidth - width + scrollbarSize), event.target.scrollLeft)

It’s not counting the containerStyle offset.

Issue Analytics

State:
Created 7 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

1reaction

mauron85commented, Feb 27, 2017

Yes, your module, saved my lot of time and also inspired me a lot. Thank you for spending your time on it.

0reactions

bvaughncommented, Feb 27, 2017

Glad to hear. 😄 Thanks for the Plnkr. Nice to see the sorts of things people are building.

Top Results From Across the Web

CSS Grid Layout - CSS: Cascading Style Sheets | MDN

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, ...

A Complete Guide to CSS Grid

Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.

CSS grid-template-areas property - W3Schools

The grid-template-areas property specifies areas within the grid layout. You can name grid items by using the grid-area property, and then reference to...

Scrolling in JavaScript Grid control - Syncfusion

The vertical and horizontal scrollbars will be displayed based on the following criteria: The vertical scrollbar appears when the total height of rows...

A Practical Guide to Centering in CSS - Stack Diary

As a property, it can be applied to any element that is considered a ... text-align-container-style"> <div class="item">Hi, I am centered.