{"action":"created","issue":{"url":"https://api.github.com/repos/bvaughn/react-virtualized/issues/155","repository_url":"https://api.github.com/repos/bvaughn/react-virtualized","labels_url":"https://api.github.com/repos/bvaughn/react-virtualized/issues/155/labels{/name}","comments_url":"https://api.github.com/repos/bvaughn/react-virtualized/issues/155/comments","events_url":"https://api.github.com/repos/bvaughn/react-virtualized/issues/155/events","html_url":"https://github.com/bvaughn/react-virtualized/pull/155","id":141102232,"number":155,"title":"Added column and row locking","user":{"login":"jquense","id":339286,"avatar_url":"https://avatars.githubusercontent.com/u/339286?v=3","gravatar_id":"","url":"https://api.github.com/users/jquense","html_url":"https://github.com/jquense","followers_url":"https://api.github.com/users/jquense/followers","following_url":"https://api.github.com/users/jquense/following{/other_user}","gists_url":"https://api.github.com/users/jquense/gists{/gist_id}","starred_url":"https://api.github.com/users/jquense/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jquense/subscriptions","organizations_url":"https://api.github.com/users/jquense/orgs","repos_url":"https://api.github.com/users/jquense/repos","events_url":"https://api.github.com/users/jquense/events{/privacy}","received_events_url":"https://api.github.com/users/jquense/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":7,"created_at":"2016-03-15T21:23:07Z","updated_at":"2016-03-16T23:55:07Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/bvaughn/react-virtualized/pulls/155","html_url":"https://github.com/bvaughn/react-virtualized/pull/155","diff_url":"https://github.com/bvaughn/react-virtualized/pull/155.diff","patch_url":"https://github.com/bvaughn/react-virtualized/pull/155.patch"},"body":"Heyo!\r\n\r\nI added the ability to freeze rows and columns a la Excel. I realize this may be a bit high level for a library such as this but I thought it was a good idea for a few reasons:\r\n\r\n1. relatively low complexity, just specifying a different offset\r\n2. low to no perf impact on folks that don't use it and (in my tests) really minimal impact on those that do.\r\n3. difficult to implement from the outside, ScrollSync sort of gets you there, but issues like #131 make it a more complicated. More relevant though when freezing columns you really want the scrollbar to span the entire horizonal width, not just the non-frozen section."},"comment":{"url":"https://api.github.com/repos/bvaughn/react-virtualized/issues/comments/197611407","html_url":"https://github.com/bvaughn/react-virtualized/pull/155#issuecomment-197611407","issue_url":"https://api.github.com/repos/bvaughn/react-virtualized/issues/155","id":197611407,"user":{"login":"jquense","id":339286,"avatar_url":"https://avatars.githubusercontent.com/u/339286?v=3","gravatar_id":"","url":"https://api.github.com/users/jquense","html_url":"https://github.com/jquense","followers_url":"https://api.github.com/users/jquense/followers","following_url":"https://api.github.com/users/jquense/following{/other_user}","gists_url":"https://api.github.com/users/jquense/gists{/gist_id}","starred_url":"https://api.github.com/users/jquense/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jquense/subscriptions","organizations_url":"https://api.github.com/users/jquense/orgs","repos_url":"https://api.github.com/users/jquense/repos","events_url":"https://api.github.com/users/jquense/events{/privacy}","received_events_url":"https://api.github.com/users/jquense/received_events","type":"User","site_admin":false},"created_at":"2016-03-16T23:55:07Z","updated_at":"2016-03-16T23:55:07Z","body":"> I'm not sure I fully understand this sentence or what you're implying/suggesting. Mind elaborating?\r\n\r\nSure, I'll try. first some more context: https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects\r\n\r\nOk, `position: sticky` is mostly designed to handle these sort of cases. The caveat is that at the \"rest\" position, (when scrollLeft is < cell `left`, or scrollTop < cell `top`), `position: sticky` acts like `position: relative` which doesn't work with the current  setup because each Cell is positioned absolutely in the container.\r\n\r\nThe simple way to address that is to render locked cells into a single div. and apply `position: sticky` to the whole set of of cells. However, that is complicated by allowing both frozen columns and rows at the same time, which essentially creates three distinct locked areas to handle positioning.\r\n\r\n1. the cells locked on the x axis\r\n2. the cells locked on the y axis\r\n3. the intersection: cells that are locked on both axis's (top left section of the grid)\r\n\r\nSo now even if you wrap the locked areas in containers, you end up with three containers, which suffer from the inline layout issue originally. \r\n\r\nThere may be a way to handle that case gracefully, but my CSS skills failed me when trying to figure it out.\r\n\r\nOne solution is just to eliminate the complexity, and only allow locking along one axis at a time, I think that's preferable to not supporting this, but a bit disappointing. Perhaps `sticky` isn't the right solution, it seems sort of strange that the scroll behavior of FF just doesn't allow this sort of thing.\r\n\r\n> [...] one not handled sufficiently (to me) by ScrollSync\r\n\r\nThe problem with the ScrollSync approach (beyond dealing with scrollbar padding), is that good UX for fixed columns (not headers) requires that the horizontal scrollbar extend the entire contrainer, not just the section that scrolls. You don't want the frozen sections to feel like tacked on sectyions to the left.\r\n\r\nPS:\r\nif you want to take it for a spin: https://github.com/jquense/react-virtualized/tree/locked-translate that branch uses `sticky` if its supported (FF, Safari)."}}