From 400bc8b46d16b1634504b875f3db212abbf04dfc Mon Sep 17 00:00:00 2001 From: samogot Date: Fri, 10 Jun 2016 16:59:13 +0300 Subject: Scrolling fixes (#3200) * scrolling fixes: - jumps on free scroll when somebody posts a new message (and old one disappears at top) - jumps on closing RHS (no compensation of resize) - scroll blinking on opening/closing RHS (delay before resize compensation) * fix scroll slipping up on multiple open/close RHS in case when (this.refs.postlist.offsetHeight % Constants.SCROLL_PAGE_FRACTION === 0) --- webapp/components/post_view/components/post_list.jsx | 7 +++---- webapp/components/sidebar_right.jsx | 6 ++---- 2 files changed, 5 insertions(+), 8 deletions(-) (limited to 'webapp') diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx index 902ad25bf..c23f785d9 100644 --- a/webapp/components/post_view/components/post_list.jsx +++ b/webapp/components/post_view/components/post_list.jsx @@ -68,7 +68,7 @@ export default class PostList extends React.Component { const childNodes = this.refs.postlistcontent.childNodes; for (let i = 0; i < childNodes.length; i++) { // If the node is 1/3 down the page - if (childNodes[i].offsetTop > (this.refs.postlist.scrollTop + (this.refs.postlist.offsetHeight / Constants.SCROLL_PAGE_FRACTION))) { + if (childNodes[i].offsetTop >= (this.refs.postlist.scrollTop + (this.refs.postlist.offsetHeight / Constants.SCROLL_PAGE_FRACTION))) { this.jumpToPostNode = childNodes[i]; break; } @@ -367,9 +367,8 @@ export default class PostList extends React.Component { } } else if (this.refs.postlist.scrollHeight !== this.prevScrollHeight) { window.requestAnimationFrame(() => { - // Only need to jump if we added posts to the top. - if (this.jumpToPostNode && (this.jumpToPostNode.offsetTop !== this.prevOffsetTop)) { - this.refs.postlist.scrollTop += (this.refs.postlist.scrollHeight - this.prevScrollHeight); + if (this.jumpToPostNode) { + this.refs.postlist.scrollTop += (this.jumpToPostNode.offsetTop - this.prevOffsetTop); } }); } diff --git a/webapp/components/sidebar_right.jsx b/webapp/components/sidebar_right.jsx index 22ddfc205..9e2fc32dd 100644 --- a/webapp/components/sidebar_right.jsx +++ b/webapp/components/sidebar_right.jsx @@ -10,8 +10,6 @@ import PostStore from 'stores/post_store.jsx'; import UserStore from 'stores/user_store.jsx'; import * as Utils from 'utils/utils.jsx'; -const SIDEBAR_SCROLL_DELAY = 500; - import React from 'react'; export default class SidebarRight extends React.Component { @@ -55,8 +53,8 @@ export default class SidebarRight extends React.Component { const isOpen = this.state.searchVisible || this.state.postRightVisible; const willOpen = nextState.searchVisible || nextState.postRightVisible; - if (!isOpen && willOpen) { - setTimeout(() => PostStore.jumpPostsViewSidebarOpen(), SIDEBAR_SCROLL_DELAY); + if (isOpen !== willOpen) { + PostStore.jumpPostsViewSidebarOpen(); } } doStrangeThings() { -- cgit v1.2.3-1-g7c22