From d29701951cf2394f9196d5dee827a205378d51cb Mon Sep 17 00:00:00 2001 From: Mark Friedrich Date: Fri, 28 Sep 2018 13:47:15 +0200 Subject: [PATCH] - fixed page scroll issue with custom scrollable select options, closed #692 --- js/app/map/scrollbar.js | 2 +- js/app/util.js | 22 +++++++++++++++++++++- public/css/v1.4.2/pathfinder.css | 2 +- public/css/v1.4.2/pathfinder.css.map | 2 +- public/js/v1.4.2/app/map/scrollbar.js | 2 +- public/js/v1.4.2/app/util.js | 22 +++++++++++++++++++++- sass/layout/_main.scss | 6 ++++-- 7 files changed, 50 insertions(+), 8 deletions(-) diff --git a/js/app/map/scrollbar.js b/js/app/map/scrollbar.js index c660e8a9..a2c2d09d 100644 --- a/js/app/map/scrollbar.js +++ b/js/app/map/scrollbar.js @@ -5,7 +5,7 @@ define([ 'jquery', 'app/init', 'app/util' -], function($, Init, Util){ +], ($, Init, Util) => { 'use strict'; /** diff --git a/js/app/util.js b/js/app/util.js index bd6306e8..900addde 100644 --- a/js/app/util.js +++ b/js/app/util.js @@ -25,6 +25,9 @@ define([ ajaxOverlayClass: 'pf-loading-overlay', ajaxOverlayWrapperClass: 'pf-loading-overlay-wrapper', + // page + noScrollClass: 'no-scroll', + // form formEditableFieldClass: 'pf-editable', // class for all xEditable fields formErrorContainerClass: 'pf-dialog-error-container', // class for "error" containers in dialogs @@ -1074,7 +1077,12 @@ define([ callbacks: { alwaysTriggerOffsets: false, // only trigger callback.onTotalScroll() once onTotalScrollOffset: 300, // trigger callback.onTotalScroll() 100px before end - onTotalScroll: function(a){ + onInit: function(){ + // disable page scroll -> otherwise page AND customScrollbars will scroll + // -> this is because the initPassiveEvents() delegates the mouseWheel events + togglePageScroll(false); + }, + onTotalScroll: function(){ // we want to "trigger" Select2´s 'scroll' event // in order to make its "infinite scrolling" function working this.mcs.content.find(':first-child').trigger('scroll'); @@ -1117,6 +1125,10 @@ define([ // the only way to prevent this is to remove the element // https://stackoverflow.com/questions/17995057/prevent-select2-from-autmatically-focussing-its-search-input-when-dropdown-is-op $(this).parents('.editableform').find(this).next().find('.select2-selection').remove(); + + // re-enable page scroll -> might be disabled before by mCustomScrollbar onInit() event + // -> in case there is a custom with scrollable options + togglePageScroll(true); }); }; @@ -1138,6 +1150,14 @@ define([ '
'; }; + /** + * prevent page from scrolling + * @param enable + */ + let togglePageScroll = (enable = true) => { + $('html').toggleClass(config.noScrollClass, !enable); + }; + /** * request a captcha image * @param reason diff --git a/sass/layout/_main.scss b/sass/layout/_main.scss index b7bb577d..14006d0d 100644 --- a/sass/layout/_main.scss +++ b/sass/layout/_main.scss @@ -31,9 +31,7 @@ a, .pf-link{ } } -// emphasized text em{ - font-style: italic; &.pf-brand{ @@ -49,6 +47,10 @@ em{ text-decoration: line-through; } +.no-scroll{ + overflow: hidden; +} + .no-padding{ padding: 0 !important; }