Scroll Swipe Protection
Dieses Plugin genriert Overlays für Iframes und andere separat scrollbare Unterelemente, um Scroll-Blockaden von Websites zu unterbinden.
Projektbeschreibung
Das flüssige Scrollen der Seite wird in dem Moment wo der Cursor über einem solchen Element landet, oder wenn der User eine darin beginnende Wischgeste ausführt, unterbrochen, da der User nun (in den meisten Fällen ungewollt) mit der Unterkomponete interagiert. Nimmt diese dann auch noch die gesamte Seitenbreite ein, wird der User so lange ausgebremst bis er die Subkomponente ganz nach unten gescrollt hat. Und manchmal reicht auch das nicht aus, zum Beispiel wenn man sich über einem Element mit mittels JavaScript erstellten, gestylten Scrollbalken befindet, denn diese fangen das Scroll-Event in der Regel komplett ab. Ein anderes Beispiel sind Karten, bei denen durch Scrollen dann gerne mal gezoomt wird. Selbst Platzhirsch GoogleMaps litt bis Mitte 2017 unter diesem Problem (was der Hauptgrund für die Entwicklung dieses Plugins war) und erst in der zweiten Jahreshälfte wurde das heute gängige Verhalten vollständig implementiert, dass die Map selbst ein Overlay erzeugt, welches Nutzer darauf hinweist, dass man entweder mit zwei Fingern zoomen oder beim Scrollen die Strg-Taste gedrückt halten muss.
Das beschriebene, unerwünschte Verhalten führt, wenn die ganze Seitenbreite in Anspruch genommen wird, auf Desktoprechnern dazu, dass man alle Bereiche einer Seite die sich unterhalb dem sämtliche Scrollgesten aborbierenden Element befinden, nur noch erreicht, indem man manuell den Haupt-Scrollbalken bewegt, was sehr umständlich ist. Und Mobilgeräte haben diese Option noch nicht einmal, so dass es passieren kann, dass dort ganze Teile einer Seite unerreichbar werden.
Um all dies zu verhindern, wird dieses Plugin aktiv: Es versteckt die betroffenen Unterbereiche hinter einer transparenten "Schutzschicht", die dafür sorgt dass Scrollgesten weiterhin die Seite selbst betreffen. Diese Schicht kann man ein- und ausblenden, entweder über ein klickbares Kontrollelement, oder zeitgesteuert nach wenigen Sekunden in denen der Mauscursor über dem Element verweilt.
Implementierung und Nutzung
Google Maps - Beispiel
$(document).ready(function(){
$('iframe[src^="https://www.google.com/maps/embed?"]').scrollSwipeProtection({ createWrapper:true });
});
Optionen:
-
Parameter: createWrapper
Expects: Boolean
Default Value: false
Description:
If true, it will create a div around each selected element. If false, each selected element will become a plugin container itself. If the element is an iframe, setting this to true is mandatory or else a lot of the plugin's functionality might not work. -
Parameter: createButton
Expects: Boolean
Default Value: true
Description:
If true, a button will be created inside each matched element (or inside its wrapper if createWrapper was set to true) that serves both as an indicator whether the blocking functionality is currently active or not as well as a toggle to switch between those states. -
Parameter: protectionToggleType
Expects: String
Default Value: 'both'
Description:
Passing the value 'scroll' or 'both' will enable the Desktop behavior for the hover timer (but only if the value provided for hoverTimeoutMs is greater than 0). Passing 'touch' or anything else will disable all hover-behavior and enable deactivation of the blocking overlay only via a click or tap on the toggle button. -
Parameter: hoverTimeoutMs
Expects: Integer
Default Value: 1200
Description:
If the value provided here is greater than 0, it will be interpreted as the waiting time in milliseconds for the cursor to keep hovering over the locked element before it gets unlocked. If it is less than or equal to 0, only a click / tap on the toggle button can unlock the element for interaction. -
Parameter: toggleButtonPosition
Expects: String
Default Value: 'top-right'
Description:
Determines the position of the toggle button. Possible values are: 'top-right', 'bottom-right', 'top-left' and 'bottom-left'. -
Parameter: toggleButtonColor
Expects: String
Default Value: '#EEEEEE'
Description:
Determines the background color of the toggle button in its default state. Must be a valid CSS-Value for the "background-color" property. -
Parameter: toggleButtonHoverColor
Expects: String
Default Value: '#CCCCCC'
Description:
Determines the background color of the toggle button in its hover state. Must be a valid CSS-Value for the "background-color" property. -
Parameter: toggleButtonPadding
Expects: String
Default Value: '10px 12px'
Description:
Determines the padding of the toggle button. Must be a valid CSS-value for the "padding" property. -
Parameter: toggleButtonImgSrcTouch
Expects: String
Default Value: 'data:image/svg+xml;utf8;base64,longBase64StringThatIAmNotGoingToWriteHere'
Description:
Here you can override the image displayed on the button to indicate that the element reacts to swipe interactions. Must be a base64-encoded String that will go into the url()-part of the CSS "background-image" property. -
Parameter: toggleButtonImgSrcScroll
Expects: String
Default Value: 'data:image/svg+xml;base64,anotherLongBase64String'
Description:
Here you can override the image displayed on the button to indicate that the element reacts to scroll interactions. Must be a base64-encoded String that will go into the url()-part of the CSS "background-image" property. -
Parameter: toggleButtonImgSrcDenied
Expects: String
Default Value: 'data:image/svg+xml;base64,alsoALongBase64String'
Description:
Here you can override the image displayed above the other two images to indicate that swiping / scrolling is currently disabled on the element. Must be a base64-encoded String that will go into the url()-part of the CSS "background-image" property. -
Parameter: toggleButtonImgHeight
Expects: String
Default Value: '32px'
Description:
Determines the height of the toggle button. Must be a valid CSS string that would fit the "height" property. -
Parameter: toggleButtonImgWidth
Expects: String
Default Value: '32px'
Description:
Determines the width of the toggle button. Must be a valid CSS string that would fit the "width" property. -
Parameter: onTSEnabled
Expects: function
Default Value: null
Description:
Here you can pass a callback function that will be executed when the unlocked element gets locked again. -
Parameter: onTSDisabled
Expects: function
Default Value: null
Description:
Here you can pass a callback function that will be executed when the locked element gets unlocked.