Fixed #1910 body jumps 1px

+ new option `hideScrollbar`

Author: fancyapps

dist/jquery.fancybox.js

@@ -1,5 +1,5 @@
 // ==================================================
-// fancyBox v3.3.4
+// fancyBox v3.3.5
 //
 // Licensed GPLv3 for open source use
 // or fancyBox Commercial License for commercial use
@@ -530,12 +530,12 @@
       // Hide scrollbars
       // ===============
 
-      if (!$.fancybox.getInstance()) {
+      if (!$.fancybox.getInstance() && firstItemOpts.hideScrollbar !== false) {
         $("body").addClass("fancybox-active");
 
         if (!$.fancybox.isMobile && document.body.scrollHeight > window.innerHeight) {
           if (scrollbarWidth === undefined) {
-            $scrollDiv = $('<div style="width:50px;height:50px;overflow:scroll;" />').appendTo("body");
+            $scrollDiv = $('<div style="width:100px;height:100px;overflow:scroll;" />').appendTo("body");
 
             scrollbarWidth = $.fancybox.scrollbarWidth = $scrollDiv[0].offsetWidth - $scrollDiv[0].clientWidth;
 
@@ -2745,7 +2745,7 @@
   });
 
   $.fancybox = {
-    version: "3.3.4",
+    version: "3.3.5",
     defaults: defaults,
 
     // Get current instance and execute a command.

dist/jquery.fancybox.min.js

@@ -831,10 +831,10 @@ <h2>Options</h2>
     // and they will be placed into toolbar (class=&quot;fancybox-toolbar&quot;` element)
     buttons: [
         &quot;zoom&quot;,
-        //'share',
-        //'slideShow',
-        //'fullScreen',
-        //'download',
+        //&quot;share&quot;,
+        //&quot;slideShow&quot;,
+        //&quot;fullScreen&quot;,
+        //&quot;download&quot;,
         &quot;thumbs&quot;,
         &quot;close&quot;
     ],
@@ -951,7 +951,7 @@ <h2>Options</h2>
 
     btnTpl: {
         download:
-            '&lt;a download data-fancybox-download class=&quot;fancybox-button fancybox-button--download&quot; title=&quot;{{DOWNLOAD}}&quot;&gt;' +
+            '&lt;a download data-fancybox-download class=&quot;fancybox-button fancybox-button--download&quot; title=&quot;{{DOWNLOAD}}&quot; href=&quot;javascript:;&quot;&gt;' +
             '&lt;svg viewBox=&quot;0 0 40 40&quot;&gt;' +
             '&lt;path d=&quot;M13,16 L20,23 L27,16 M20,7 L20,23 M10,24 L10,28 L30,28 L30,24&quot; /&gt;' +
             &quot;&lt;/svg&gt;&quot; +
@@ -978,23 +978,26 @@ <h2>Options</h2>
 
         // Arrows
         arrowLeft:
-            '&lt;button data-fancybox-prev class=&quot;fancybox-button fancybox-button--arrow_left&quot; title=&quot;{{PREV}}&quot;&gt;' +
+            '&lt;a data-fancybox-prev class=&quot;fancybox-button fancybox-button--arrow_left&quot; title=&quot;{{PREV}}&quot; href=&quot;javascript:;&quot;&gt;' +
             '&lt;svg viewBox=&quot;0 0 40 40&quot;&gt;' +
             '&lt;path d=&quot;M18,12 L10,20 L18,28 M10,20 L30,20&quot;&gt;&lt;/path&gt;' +
             &quot;&lt;/svg&gt;&quot; +
-            &quot;&lt;/button&gt;&quot;,
+            &quot;&lt;/a&gt;&quot;,
 
         arrowRight:
-            '&lt;button data-fancybox-next class=&quot;fancybox-button fancybox-button--arrow_right&quot; title=&quot;{{NEXT}}&quot;&gt;' +
+            '&lt;a data-fancybox-next class=&quot;fancybox-button fancybox-button--arrow_right&quot; title=&quot;{{NEXT}}&quot; href=&quot;javascript:;&quot;&gt;' +
             '&lt;svg viewBox=&quot;0 0 40 40&quot;&gt;' +
             '&lt;path d=&quot;M10,20 L30,20 M22,12 L30,20 L22,28&quot;&gt;&lt;/path&gt;' +
             &quot;&lt;/svg&gt;&quot; +
-            &quot;&lt;/button&gt;&quot;
+            &quot;&lt;/a&gt;&quot;
     },
 
     // Container is injected into this element
     parentEl: &quot;body&quot;,
 
+    // Hide browser vertical scrollbars; use at your own risk
+    hideScrollbar: true,
+
     // Focus handling
     // ==============
 
@@ -1027,13 +1030,13 @@ <h2>Options</h2>
     // Customize or add new media types
     // Example:
     /*
-    media : {
-        youtube : {
-            params : {
-                autoplay : 0
+        media : {
+            youtube : {
+                params : {
+                    autoplay : 0
+                }
             }
         }
-    }
     */
     media: {},
 
@@ -1060,8 +1063,8 @@ <h2>Options</h2>
     // Example:
     /*
         afterShow: function( instance, current ) {
-                console.info( 'Clicked element:' );
-                console.info( current.opts.$orig );
+            console.info( 'Clicked element:' );
+            console.info( current.opts.$orig );
         }
     */
 
@@ -1115,7 +1118,6 @@ <h2>Options</h2>
 
     mobile: {
         idleTime: false,
-
         clickContent: function(current, event) {
             return current.type === &quot;image&quot; ? &quot;toggleControls&quot; : false;
         },

docs/index.html

@@ -1,7 +1,7 @@
 {
   "name": "@fancyapps/fancybox",
   "description": "Touch enabled, responsive and fully customizable jQuery lightbox script",
-  "version": "3.3.4",
+  "version": "3.3.5",
   "homepage": "http://fancyapps.com/fancybox/",
   "main": "./dist/jquery.fancybox.js",
   "author": "fancyApps",

package.json

@@ -520,12 +520,12 @@
       // Hide scrollbars
       // ===============
 
-      if (!$.fancybox.getInstance()) {
+      if (!$.fancybox.getInstance() && firstItemOpts.hideScrollbar !== false) {
         $("body").addClass("fancybox-active");
 
         if (!$.fancybox.isMobile && document.body.scrollHeight > window.innerHeight) {
           if (scrollbarWidth === undefined) {
-            $scrollDiv = $('<div style="width:50px;height:50px;overflow:scroll;" />').appendTo("body");
+            $scrollDiv = $('<div style="width:100px;height:100px;overflow:scroll;" />').appendTo("body");
 
             scrollbarWidth = $.fancybox.scrollbarWidth = $scrollDiv[0].offsetWidth - $scrollDiv[0].clientWidth;