Preventing scroll

wp-add-to-homescreen/lib/imgs/add2home.svg

@@ -31,6 +31,38 @@
          id="path14539"
          inkscape:connector-curvature="0" />
     </symbol>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Drop Shadow"
+       id="filter22048">
+      <feFlood
+         flood-opacity="0.313726"
+         flood-color="rgb(0,0,0)"
+         result="flood"
+         id="feFlood22050" />
+      <feComposite
+         in="flood"
+         in2="SourceGraphic"
+         operator="in"
+         result="composite1"
+         id="feComposite22052" />
+      <feGaussianBlur
+         in="composite1"
+         stdDeviation="0.8"
+         result="blur"
+         id="feGaussianBlur22054" />
+      <feOffset
+         dx="1.94289e-16"
+         dy="2.77556e-17"
+         result="offset"
+         id="feOffset22056" />
+      <feComposite
+         in="SourceGraphic"
+         in2="offset"
+         operator="over"
+         result="composite2"
+         id="feComposite22058" />
+    </filter>
   </defs>
   <sodipodi:namedview
      id="base"
@@ -40,7 +72,7 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="5.6"
-     inkscape:cx="-0.95402618"
+     inkscape:cx="-1.1325976"
      inkscape:cy="-10.106878"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
@@ -62,7 +94,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -71,35 +103,33 @@
      inkscape:groupmode="layer"
      id="layer1"
      transform="translate(-358.04724,-498.5748)">
-    <rect
-       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       id="rect22002"
-       width="22.67857"
-       height="30.17857"
-       x="371.44009"
-       y="508.35968" />
     <g
        id="use27067"
-       style="fill:#000000;stroke:#000000"
+       style="fill:#000000;stroke:#ffffff;stroke-opacity:1;filter:url(#filter22048)"
        transform="translate(358.85039,499.37795)">
       <title
          id="title27087">Smartphone</title>
       <path
          id="path27089"
-         style="stroke:none"
-         d="M 34,2.02 14,2 c -2.21,0 -4,1.79 -4,4 l 0,36 c 0,2.21 1.79,4 4,4 l 20,0 c 2.21,0 4,-1.79 4,-4 L 38,6 C 38,3.79 36.21,2.02 34,2.02 Z m 0,35.98 -20,0 0,-28 20,0 0,28 z"
-         inkscape:connector-curvature="0" />
+         style="stroke:#ffffff;stroke-opacity:1"
+         d="M 34,2.02 14,2 c -2.21,0 -4,1.79 -4,4 l 0,36 c 0,2.21 1.79,4 4,4 l 20,0 c 2.21,0 4,-1.79 4,-4 L 38,6 C 38,3.79 36.21,2.02 34,2.02 Z"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccssssssc" />
     </g>
-    <text
-       xml:space="preserve"
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       id="rect22002"
+       width="22.67857"
+       height="30.17857"
+       x="371.51111"
+       y="508.28867" />
+    <g
        style="font-style:normal;font-weight:normal;font-size:17.08722687px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       x="375.69177"
-       y="528.73438"
-       id="text27081"
-       sodipodi:linespacing="125%"><tspan
-         sodipodi:role="line"
-         id="tspan27083"
-         x="375.69177"
-         y="528.73438">+</tspan></text>
+       id="text27081">
+      <path
+         d="m 383.55123,518.02148 0,4.64726 4.64726,0 0,1.41838 -4.64726,0 0,4.64725 -1.40169,0 0,-4.64725 -4.64726,0 0,-1.41838 4.64726,0 0,-4.64726 1.40169,0 z"
+         style=""
+         id="path21860" />
+    </g>
   </g>
 </svg>

wp-add-to-homescreen/lib/js/add-to-homescreen.js

@@ -100,6 +100,8 @@
   };
 
   wpAddToHomescreen.overlay = {
+    container: null,
+
     element: null,
 
     body: null,
@@ -108,6 +110,7 @@
       this.show = this.show.bind(this);
       this.hide = this.hide.bind(this);
       this.body = bodyElement;
+      this.container = overlayContainer;
       this.element = this.installOverlay(overlayContainer);
     },
 
@@ -179,12 +182,14 @@
     show: function () {
       this.element.classList.add('shown');
       this.body.classList.add('noscroll');
+      this.preventScroll();
       wpAddToHomescreen.stats.logOnce('instructions-shown');
     },
 
     hide: function () {
       this.element.classList.remove('shown');
       this.body.classList.remove('noscroll');
+      this.restoreScroll();
     },
 
     getExplanationImage: function (platform) {
@@ -228,6 +233,22 @@
         buffer.appendChild(p);
         return buffer;
       }
+    },
+
+    preventScroll: function () {
+      ['scroll', 'touchmove', 'mousewheel'].forEach(function (event) {
+        this.container.addEventListener(event, this.noScroll, true);
+      }.bind(this));
+    },
+
+    restoreScroll: function () {
+      ['scroll', 'touchmove', 'mousewheel'].forEach(function (event) {
+        this.container.removeEventListener(event, this.noScroll, true);
+      }.bind(this));
+    },
+
+    noScroll: function (evt) {
+      evt.preventDefault();
     }
   };
 })(window, wpAddToHomescreenSetup, isMobile, localforage);