body-scroll-freezer - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

docs/js/body-scroll-freezer.min.js

 /**
  * body-scroll-freezer - Dependency-free JS module to freeze body scroll when opening modal box
  *
- * @version v1.0.2
+ * @version v1.0.4
  * @link https://github.com/ramonvictor/body-scroll-freezer/
@@ -9,2 +9,2 @@ * @author @ramonvictor
  */
-!function(){"use strict";function e(){return this.scrollWidth=l=i()}function t(){c.style.overflow="hidden",l&&(o()&&(c.style.paddingRight=l+"px"),p&&d())}function n(){c.style.overflow="",l&&(c.style.paddingRight="",p&&d())}function i(){var e,t=document.createElement("div");return t.className=s,c.appendChild(t),e=t.offsetWidth-t.clientWidth,c.removeChild(t),e}function o(){return c.scrollHeight>document.documentElement.clientHeight}function d(){f=f===!0?!1:!0,f?window.addEventListener("resize",r,!1):window.removeEventListener("resize",r,!1)}function r(){m||(o()?c.style.paddingRight=l+"px":c.style.paddingRight="",m=!0,window.setTimeout(function(){m=!1},150))}var l,u={},s="js-scrollbar-measure",c=document.body,f=!1,m=!1,p="addEventListener"in Element.prototype;u.init=e,u.freeze=t,u.unfreeze=n,"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=u:"undefined"!=typeof window&&(window.bodyScrollFreezer=u)}();
+!function(){"use strict";function e(){return this.scrollWidth=l=i()}function t(){s.style.overflow="hidden",l&&(o()&&(s.style.paddingRight=l+"px"),c&&d(!0))}function n(){s.style.overflow="",l&&(s.style.paddingRight="",c&&d(!1))}function i(){var e,t=document.createElement("div");return t.setAttribute("style",p),s.appendChild(t),e=t.offsetWidth-t.clientWidth,s.removeChild(t),e}function o(){return s.scrollHeight>document.documentElement.clientHeight}function d(e){e?window.addEventListener("resize",r,!1):window.removeEventListener("resize",r,!1)}function r(){f||(o()?s.style.paddingRight=l+"px":s.style.paddingRight="",f=!0,window.setTimeout(function(){f=!1},150))}var l,u={},s=document.body,f=!1,c="addEventListener"in Element.prototype,p=["width: 100px","height: 100px","overflow: scroll","position: absolute","top: -9999px"].join(";");u.init=e,u.freeze=t,u.unfreeze=n,"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=u:"undefined"!=typeof window&&(window.bodyScrollFreezer=u)}();

package.json

@@ -6,3 +6,3 @@ {
   "license": "MIT",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "docs/js/body-scroll-freezer.min.js",
@@ -9,0 +9,0 @@ "homepage": "https://github.com/ramonvictor/body-scroll-freezer/",

README.md

@@ -53,16 +53,1 @@ # body-scroll-freezer
 ```
-
-## Required [CSS](/src/body-scroll-freezer.css)
-
-```css
-/*
- * Props to https://davidwalsh.name/detect-scrollbar-width
- */
-.js-scrollbar-measure {
-  width: 100px;
-  height: 100px;
-  overflow: scroll;
-  position: absolute;
-  top: -9999px;
-}
-```

src/body-scroll-freezer.js

@@ -8,9 +8,15 @@ (function() {
   var API = {};
-  var measureScrollClass = 'js-scrollbar-measure';
   var body = document.body;
   var scrollWidth;
-  var isFroozen = false;
   var resizeWait = false;
   var supportsEventListener = ('addEventListener' in Element.prototype);
+  var measureScrollStyle = [
+      'width: 100px',
+      'height: 100px',
+      'overflow: scroll',
+      'position: absolute',
+      'top: -9999px'
+    ].join(';');
 
+
   /**
@@ -42,3 +48,3 @@ * Init module by getting browser scroll width.
     if (supportsEventListener) {
-      toggleResizeListener();
+      toggleResizeListener(true);
     }
@@ -61,3 +67,3 @@ }
     if (supportsEventListener) {
-      toggleResizeListener();
+      toggleResizeListener(false);
     }
@@ -68,2 +74,3 @@ }
    * Append/remove `div.js-scrollbar-measure` just to measure scroll bar width.
+   * Props to {@link https://davidwalsh.name/detect-scrollbar-width|@davidwalshblog}.
    * @private
@@ -76,4 +83,5 @@ * @return {Number} Browser scroll bar width
 
-    div.className = measureScrollClass;
+    div.setAttribute('style', measureScrollStyle);
     body.appendChild(div);
+
     scrollBarWidth = div.offsetWidth - div.clientWidth;
@@ -100,6 +108,4 @@ body.removeChild(div);
    */
-  function toggleResizeListener() {
-    isFroozen = (isFroozen === true ? false : true);
-
-    if (isFroozen) {
+  function toggleResizeListener(isFrozen) {
+    if (isFrozen) {
       window.addEventListener('resize', onWindowResize, false);
@@ -112,3 +118,3 @@ } else {
   /**
-   * Update body padding-right depending on window scroll visibility.
+   * Throttled logic to update body padding based on window scroll visibility.
    * @private
@@ -115,0 +121,0 @@ */

No alert changes

Improved metrics

Lines of code

204

increased by2.51%

Worsened metrics

Total package byte prevSize

29103

decreased by-0.04%

Number of lines in readme file

53

decreased by-22.06%

No dependency changes