Bugfix: scrollTop/scrollLeft never worked because .b-content has overflow:auto not the sub-div .content

This commit is contained in:
djmaze 2020-08-06 16:14:50 +02:00
parent b3dd0c51b5
commit e1b274fcb4
10 changed files with 28 additions and 32 deletions

View file

@ -271,7 +271,7 @@ class Selector {
init(contentVisible, contentScrollable, keyScope = 'all') { init(contentVisible, contentScrollable, keyScope = 'all') {
this.oContentVisible = contentVisible; this.oContentVisible = contentVisible;
this.oContentScrollable = contentScrollable; this.oContentScrollable = contentScrollable ? contentScrollable[0] : null;
if (this.oContentVisible && this.oContentScrollable) { if (this.oContentVisible && this.oContentScrollable) {
$(this.oContentVisible) $(this.oContentVisible)
@ -519,14 +519,15 @@ class Selector {
focusedHeight = $focused.outerHeight(); focusedHeight = $focused.outerHeight();
if (list && list[0] && list[0].focused()) { if (list && list[0] && list[0].focused()) {
this.oContentScrollable.scrollTop(0); this.oContentScrollable.scrollTop = 0;
return true; return true;
} else if (pos && (0 > pos.top || pos.top + focusedHeight > visibleHeight)) { } 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 0 > pos.top
? this.oContentScrollable.scrollTop() + pos.top - offset ? top - offset
: this.oContentScrollable.scrollTop() + pos.top - visibleHeight + focusedHeight + offset : top - visibleHeight + focusedHeight + offset
); ;
return true; return true;
} }
@ -535,19 +536,14 @@ class Selector {
} }
/** /**
* @param {boolean=} fast = false
* @returns {boolean} * @returns {boolean}
*/ */
scrollToTop(fast = false) { scrollToTop() {
if (!this.oContentVisible || !this.oContentScrollable) { if (!this.oContentVisible || !this.oContentScrollable) {
return false; return false;
} }
if (fast || 50 > this.oContentScrollable.scrollTop()) { this.oContentScrollable.scrollTop = 0;
this.oContentScrollable.scrollTop(0);
} else {
this.oContentScrollable.stop().animate({ scrollTop: 0 }, 200);
}
return true; return true;
} }

View file

@ -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;
} }
// -- // --

View file

@ -86,6 +86,7 @@
width: @contacts-popup-left-width; width: @contacts-popup-left-width;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
scroll-behavior: smooth;
.content { .content {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

View file

@ -125,6 +125,7 @@ html.rl-no-preview-pane {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
z-index: 101; z-index: 101;
scroll-behavior: smooth;
box-sizing: border-box; box-sizing: border-box;

View file

@ -258,6 +258,7 @@ html.rl-no-preview-pane {
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
border-radius: @rlLowBorderRadius; border-radius: @rlLowBorderRadius;
scroll-behavior: smooth;
.buttonUp, .buttonUnFull, .buttonFull { .buttonUp, .buttonUnFull, .buttonFull {
display: inline-block; display: inline-block;

View file

@ -92,6 +92,7 @@
right: @rlLowMargin; right: @rlLowMargin;
overflow-y: auto; overflow-y: auto;
z-index: 2; z-index: 2;
scroll-behavior: smooth;
background-color: #fff; background-color: #fff;
border: @rlMainBorderSize solid @rlMainDarkColor; border: @rlMainBorderSize solid @rlMainDarkColor;

View file

@ -619,9 +619,8 @@ class ContactsPopupView extends AbstractViewNext {
onBuild(dom) { onBuild(dom) {
this.oContentVisible = $('.b-list-content', 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, () => { key('delete', KeyState.ContactList, () => {
this.deleteCommand(); this.deleteCommand();

View file

@ -64,7 +64,7 @@ class FolderListMailBoxUserView extends AbstractViewNext {
onBuild(dom) { onBuild(dom) {
this.oContentVisible = $('.b-content', dom); this.oContentVisible = $('.b-content', dom);
this.oContentScrollable = $('.content', this.oContentVisible); this.oContentScrollable = this.oContentVisible ? this.oContentVisible[0] : null;
const self = this, const self = this,
isMobile = Settings.appSettingsGet('mobile'), isMobile = Settings.appSettingsGet('mobile'),
@ -220,12 +220,11 @@ class FolderListMailBoxUserView extends AbstractViewNext {
focusedHeight = focused.outerHeight(); focusedHeight = focused.outerHeight();
if (pos && (0 > pos.top || pos.top + focusedHeight > visibleHeight)) { if (pos && (0 > pos.top || pos.top + focusedHeight > visibleHeight)) {
let top = this.oContentScrollable.scrollTop + pos.top;
if (0 > pos.top) { if (0 > pos.top) {
this.oContentScrollable.scrollTop(this.oContentScrollable.scrollTop() + pos.top - offset); this.oContentScrollable.scrollTop = top - offset;
} else { } else {
this.oContentScrollable.scrollTop( this.oContentScrollable.scrollTop = top - visibleHeight + focusedHeight + offset;
this.oContentScrollable.scrollTop() + pos.top - visibleHeight + focusedHeight + offset
);
} }
return true; return true;

View file

@ -739,9 +739,8 @@ class MessageListMailBoxUserView extends AbstractViewNext {
const self = this; const self = this;
this.oContentVisible = $('.b-content', dom); 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) { if (this.mobile) {
dom.on('click', () => { dom.on('click', () => {

View file

@ -656,9 +656,8 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
this.messageDomFocused(KeyState.MessageView === value && !inFocus()); this.messageDomFocused(KeyState.MessageView === value && !inFocus());
}); });
this.oMessageScrollerDom = dom.find('.messageItem .content'); const node = dom.find('.messageItem');
this.oMessageScrollerDom = this.oMessageScrollerDom = node && node[0] ? node[0] : null;
this.oMessageScrollerDom && this.oMessageScrollerDom[0] ? this.oMessageScrollerDom : null;
this.initShortcuts(); this.initShortcuts();
} }
@ -784,7 +783,7 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
key('tab, shift+tab, left', KeyState.MessageView, (event, handler) => { key('tab, shift+tab, left', KeyState.MessageView, (event, handler) => {
if (!this.fullScreenMode() && this.message() && Layout.NoPreview !== this.layout()) { if (!this.fullScreenMode() && this.message() && Layout.NoPreview !== this.layout()) {
if (event && handler && 'left' === handler.shortcut) { if (event && handler && 'left' === handler.shortcut) {
if (this.oMessageScrollerDom && 0 < this.oMessageScrollerDom.scrollLeft()) { if (this.oMessageScrollerDom && 0 < this.oMessageScrollerDom.scrollLeft) {
return true; return true;
} }
@ -869,10 +868,10 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
scrollMessageToTop() { scrollMessageToTop() {
if (this.oMessageScrollerDom) { if (this.oMessageScrollerDom) {
if (Magics.Size50px < this.oMessageScrollerDom.scrollTop()) { if (Magics.Size50px < this.oMessageScrollerDom.scrollTop) {
this.oMessageScrollerDom.scrollTop(Magics.Size50px).animate({ 'scrollTop': 0 }, Magics.Time200ms); this.oMessageScrollerDom.scrollTop = Magics.Size50px;
} else { } else {
this.oMessageScrollerDom.scrollTop(0); this.oMessageScrollerDom.scrollTop = 0;
} }
windowResize(); windowResize();
@ -881,7 +880,7 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
scrollMessageToLeft() { scrollMessageToLeft() {
if (this.oMessageScrollerDom) { if (this.oMessageScrollerDom) {
this.oMessageScrollerDom.scrollLeft(0); this.oMessageScrollerDom.scrollLeft = 0;
windowResize(); windowResize();
} }
} }