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') {
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;
}

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;
overflow: hidden;
overflow-y: auto;
scroll-behavior: smooth;
.content {
-webkit-overflow-scrolling: touch;
@ -431,4 +432,4 @@ html.rl-mobile {
left: 170px;
}
}
}
}

View file

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

View file

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

View file

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

View file

@ -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();

View file

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

View file

@ -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', () => {

View file

@ -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();
}
}