diff --git a/dev/Common/Selector.js b/dev/Common/Selector.js index 2401cbfbc..12061226e 100644 --- a/dev/Common/Selector.js +++ b/dev/Common/Selector.js @@ -271,7 +271,7 @@ class Selector { init(contentVisible, contentScrollable, keyScope = 'all') { this.oContentVisible = contentVisible; - this.oContentScrollable = contentScrollable; + this.oContentScrollable = contentScrollable ? contentScrollable[0] : null; if (this.oContentVisible && this.oContentScrollable) { $(this.oContentVisible) @@ -519,14 +519,15 @@ class Selector { focusedHeight = $focused.outerHeight(); if (list && list[0] && list[0].focused()) { - this.oContentScrollable.scrollTop(0); + this.oContentScrollable.scrollTop = 0; return true; } else if (pos && (0 > pos.top || pos.top + focusedHeight > visibleHeight)) { - this.oContentScrollable.scrollTop( + let top = this.oContentScrollable.scrollTop + pos.top; + this.oContentScrollable.scrollTop = 0 > pos.top - ? this.oContentScrollable.scrollTop() + pos.top - offset - : this.oContentScrollable.scrollTop() + pos.top - visibleHeight + focusedHeight + offset - ); + ? top - offset + : top - visibleHeight + focusedHeight + offset + ; return true; } @@ -535,19 +536,14 @@ class Selector { } /** - * @param {boolean=} fast = false * @returns {boolean} */ - scrollToTop(fast = false) { + scrollToTop() { if (!this.oContentVisible || !this.oContentScrollable) { return false; } - if (fast || 50 > this.oContentScrollable.scrollTop()) { - this.oContentScrollable.scrollTop(0); - } else { - this.oContentScrollable.stop().animate({ scrollTop: 0 }, 200); - } + this.oContentScrollable.scrollTop = 0; return true; } diff --git a/dev/Screen/AbstractSettings.js b/dev/Screen/AbstractSettings.js index 37a784209..58606044f 100644 --- a/dev/Screen/AbstractSettings.js +++ b/dev/Screen/AbstractSettings.js @@ -128,7 +128,7 @@ class AbstractSettingsScreen extends AbstractScreen { ); }); - $('#rl-content .b-settings .b-content .content').scrollTop(0); + $('#rl-content .b-settings .b-content')[0].scrollTop = 0; } // -- diff --git a/dev/Styles/Contacts.less b/dev/Styles/Contacts.less index 3fd7edbe0..8b849aa81 100644 --- a/dev/Styles/Contacts.less +++ b/dev/Styles/Contacts.less @@ -86,6 +86,7 @@ width: @contacts-popup-left-width; overflow: hidden; overflow-y: auto; + scroll-behavior: smooth; .content { -webkit-overflow-scrolling: touch; @@ -431,4 +432,4 @@ html.rl-mobile { left: 170px; } } -} \ No newline at end of file +} diff --git a/dev/Styles/MessageList.less b/dev/Styles/MessageList.less index 072502a60..0689650ef 100644 --- a/dev/Styles/MessageList.less +++ b/dev/Styles/MessageList.less @@ -125,6 +125,7 @@ html.rl-no-preview-pane { overflow-x: hidden; overflow-y: auto; z-index: 101; + scroll-behavior: smooth; box-sizing: border-box; diff --git a/dev/Styles/MessageView.less b/dev/Styles/MessageView.less index 1ccd7eb4b..0034d6e1f 100644 --- a/dev/Styles/MessageView.less +++ b/dev/Styles/MessageView.less @@ -258,6 +258,7 @@ html.rl-no-preview-pane { overflow: auto; -webkit-overflow-scrolling: touch; border-radius: @rlLowBorderRadius; + scroll-behavior: smooth; .buttonUp, .buttonUnFull, .buttonFull { display: inline-block; diff --git a/dev/Styles/Settings.less b/dev/Styles/Settings.less index f60b7d25f..6337adc88 100644 --- a/dev/Styles/Settings.less +++ b/dev/Styles/Settings.less @@ -92,6 +92,7 @@ right: @rlLowMargin; overflow-y: auto; z-index: 2; + scroll-behavior: smooth; background-color: #fff; border: @rlMainBorderSize solid @rlMainDarkColor; diff --git a/dev/View/Popup/Contacts.js b/dev/View/Popup/Contacts.js index 6dbe8dde8..a1d4a92f4 100644 --- a/dev/View/Popup/Contacts.js +++ b/dev/View/Popup/Contacts.js @@ -619,9 +619,8 @@ class ContactsPopupView extends AbstractViewNext { onBuild(dom) { this.oContentVisible = $('.b-list-content', dom); - this.oContentScrollable = $('.content', this.oContentVisible); - this.selector.init(this.oContentVisible, this.oContentScrollable, KeyState.ContactList); + this.selector.init(this.oContentVisible, this.oContentVisible, KeyState.ContactList); key('delete', KeyState.ContactList, () => { this.deleteCommand(); diff --git a/dev/View/User/MailBox/FolderList.js b/dev/View/User/MailBox/FolderList.js index a086de3ca..645c34f56 100644 --- a/dev/View/User/MailBox/FolderList.js +++ b/dev/View/User/MailBox/FolderList.js @@ -64,7 +64,7 @@ class FolderListMailBoxUserView extends AbstractViewNext { onBuild(dom) { this.oContentVisible = $('.b-content', dom); - this.oContentScrollable = $('.content', this.oContentVisible); + this.oContentScrollable = this.oContentVisible ? this.oContentVisible[0] : null; const self = this, isMobile = Settings.appSettingsGet('mobile'), @@ -220,12 +220,11 @@ class FolderListMailBoxUserView extends AbstractViewNext { focusedHeight = focused.outerHeight(); if (pos && (0 > pos.top || pos.top + focusedHeight > visibleHeight)) { + let top = this.oContentScrollable.scrollTop + pos.top; if (0 > pos.top) { - this.oContentScrollable.scrollTop(this.oContentScrollable.scrollTop() + pos.top - offset); + this.oContentScrollable.scrollTop = top - offset; } else { - this.oContentScrollable.scrollTop( - this.oContentScrollable.scrollTop() + pos.top - visibleHeight + focusedHeight + offset - ); + this.oContentScrollable.scrollTop = top - visibleHeight + focusedHeight + offset; } return true; diff --git a/dev/View/User/MailBox/MessageList.js b/dev/View/User/MailBox/MessageList.js index c6b3cb19a..601ae7b95 100644 --- a/dev/View/User/MailBox/MessageList.js +++ b/dev/View/User/MailBox/MessageList.js @@ -739,9 +739,8 @@ class MessageListMailBoxUserView extends AbstractViewNext { const self = this; this.oContentVisible = $('.b-content', dom); - this.oContentScrollable = $('.content', this.oContentVisible); - this.selector.init(this.oContentVisible, this.oContentScrollable, KeyState.MessageList); + this.selector.init(this.oContentVisible, this.oContentVisible, KeyState.MessageList); if (this.mobile) { dom.on('click', () => { diff --git a/dev/View/User/MailBox/MessageView.js b/dev/View/User/MailBox/MessageView.js index c13bfb80c..ba6354810 100644 --- a/dev/View/User/MailBox/MessageView.js +++ b/dev/View/User/MailBox/MessageView.js @@ -656,9 +656,8 @@ class MessageViewMailBoxUserView extends AbstractViewNext { this.messageDomFocused(KeyState.MessageView === value && !inFocus()); }); - this.oMessageScrollerDom = dom.find('.messageItem .content'); - this.oMessageScrollerDom = - this.oMessageScrollerDom && this.oMessageScrollerDom[0] ? this.oMessageScrollerDom : null; + const node = dom.find('.messageItem'); + this.oMessageScrollerDom = node && node[0] ? node[0] : null; this.initShortcuts(); } @@ -784,7 +783,7 @@ class MessageViewMailBoxUserView extends AbstractViewNext { key('tab, shift+tab, left', KeyState.MessageView, (event, handler) => { if (!this.fullScreenMode() && this.message() && Layout.NoPreview !== this.layout()) { if (event && handler && 'left' === handler.shortcut) { - if (this.oMessageScrollerDom && 0 < this.oMessageScrollerDom.scrollLeft()) { + if (this.oMessageScrollerDom && 0 < this.oMessageScrollerDom.scrollLeft) { return true; } @@ -869,10 +868,10 @@ class MessageViewMailBoxUserView extends AbstractViewNext { scrollMessageToTop() { if (this.oMessageScrollerDom) { - if (Magics.Size50px < this.oMessageScrollerDom.scrollTop()) { - this.oMessageScrollerDom.scrollTop(Magics.Size50px).animate({ 'scrollTop': 0 }, Magics.Time200ms); + if (Magics.Size50px < this.oMessageScrollerDom.scrollTop) { + this.oMessageScrollerDom.scrollTop = Magics.Size50px; } else { - this.oMessageScrollerDom.scrollTop(0); + this.oMessageScrollerDom.scrollTop = 0; } windowResize(); @@ -881,7 +880,7 @@ class MessageViewMailBoxUserView extends AbstractViewNext { scrollMessageToLeft() { if (this.oMessageScrollerDom) { - this.oMessageScrollerDom.scrollLeft(0); + this.oMessageScrollerDom.scrollLeft = 0; windowResize(); } }