<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Can I Disable Scroll Wheel in Web AppBuilder?  in ArcGIS Instant Apps Questions</title>
    <link>https://community.esri.com/t5/arcgis-instant-apps-questions/can-i-disable-scroll-wheel-in-web-appbuilder/m-p/748715#M364</link>
    <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;I made an app in Web AppBuilder that has some critical functionality. The issue I am facing is that I need to be able to disable the scroll wheel. I know there is a template called “Minimalist”, but that does not afford the functionality I need my app to have (which is why I worked off Web AppBuilder instead of a template).&lt;/P&gt;&lt;P&gt;I have tried a number of things, and cannot arrive at a solution. I have some experience in python, but am fairly new to javascript and html. I found a number of possible workarounds, including: &lt;STRONG style="border: none windowtext 1.0pt; padding: 0in; color: #333333; background: white; font-size: 9.0pt; "&gt;&lt;BR /&gt; &lt;SPAN&gt;this&lt;/SPAN&gt;&lt;/STRONG&gt;&lt;SPAN style="border: none windowtext 1.0pt; padding: 0in; color: #333333; background: white; font-size: 9.0pt; "&gt;.&lt;/SPAN&gt;&lt;SPAN style="border: none windowtext 1.0pt; padding: 0in; color: #333333; background: white; font-size: 9.0pt; "&gt;map&lt;/SPAN&gt;&lt;SPAN style="border: none windowtext 1.0pt; padding: 0in; color: #333333; background: white; font-size: 9.0pt; "&gt;.&lt;/SPAN&gt;&lt;SPAN style="border: none windowtext 1.0pt; padding: 0in; color: #333333; background: white; font-size: 9.0pt; "&gt;disableScrollWheelZoom&lt;/SPAN&gt;&lt;SPAN style="border: none windowtext 1.0pt; padding: 0in; color: #333333; background: white; font-size: 9.0pt; "&gt;() – but I have no idea where to insert this. &lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="border: none windowtext 1.0pt; padding: 0in; color: #333333; background: white; font-size: 9.0pt; "&gt;&amp;nbsp;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="border: none windowtext 1.0pt; padding: 0in; color: #333333; background: white; font-size: 9.0pt; "&gt;I also found this snippet of JavaScript, but again do not know where to begin: &lt;/SPAN&gt;&lt;SPAN style="font-size: 10.5pt; color: #595959; background: #F8F8F8;"&gt;view.on(&lt;/SPAN&gt;&lt;SPAN style="font-size: 10.5pt; color: #c41a16;"&gt;"mouse-wheel"&lt;/SPAN&gt;&lt;SPAN style="font-size: 10.5pt; color: #595959; background: #F8F8F8;"&gt;, &lt;/SPAN&gt;&lt;STRONG style="color: #aa0d91; font-size: 10.5pt; "&gt;function&lt;/STRONG&gt;&lt;SPAN style="font-size: 10.5pt; color: #595959;"&gt;(&lt;/SPAN&gt;&lt;SPAN style="font-size: 10.5pt; color: #5c2699;"&gt;event&lt;/SPAN&gt;&lt;SPAN style="font-size: 10.5pt; color: #595959;"&gt;) &lt;SPAN style="background: #F8F8F8;"&gt;{&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P style="margin-bottom: .0001pt;"&gt;&lt;SPAN style="font-size: 10.5pt; color: #595959; background: #F8F8F8;"&gt;&amp;nbsp; &lt;/SPAN&gt;&lt;EM style="color: #006a00; font-size: 10.5pt; "&gt;// prevents zooming with the mouse-wheel event&lt;/EM&gt;&lt;/P&gt;&lt;P style="margin-bottom: .0001pt;"&gt;&lt;SPAN style="font-size: 10.5pt; color: #595959; background: #F8F8F8;"&gt;&amp;nbsp; event.stopPropagation();&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="font-size: 10.5pt; color: #595959; background: #F8F8F8;"&gt;});&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;This is what my embedded webapp code currently looks like in wordpress (everything comes up, but there is still the scroll issue).&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&amp;lt;style&amp;gt;.embed-container {position: relative; padding-bottom: 80%; height: 0; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px;}&amp;lt;/style&amp;gt;&amp;lt;div class="embed-container"&amp;gt;&amp;lt;iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="Nature Preserves of the Lancaster County Conservancy- Near Me 1" src="https://7871lccon.lcc.local:3344/webappbuilder/apps/2/"&amp;gt;&amp;lt;/iframe&amp;gt;&amp;lt;/div&amp;gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;I recently completed a training on Web AppBuilder for Developers and am getting more comfortable with navigating through that, if anyone has solutions.&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;Thanks!&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
    <pubDate>Fri, 12 Apr 2019 21:13:43 GMT</pubDate>
    <dc:creator>Anonymous User</dc:creator>
    <dc:date>2019-04-12T21:13:43Z</dc:date>
    <item>
      <title>Can I Disable Scroll Wheel in Web AppBuilder?</title>
      <link>https://community.esri.com/t5/arcgis-instant-apps-questions/can-i-disable-scroll-wheel-in-web-appbuilder/m-p/748715#M364</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;I made an app in Web AppBuilder that has some critical functionality. The issue I am facing is that I need to be able to disable the scroll wheel. I know there is a template called “Minimalist”, but that does not afford the functionality I need my app to have (which is why I worked off Web AppBuilder instead of a template).&lt;/P&gt;&lt;P&gt;I have tried a number of things, and cannot arrive at a solution. I have some experience in python, but am fairly new to javascript and html. I found a number of possible workarounds, including: &lt;STRONG style="border: none windowtext 1.0pt; padding: 0in; color: #333333; background: white; font-size: 9.0pt; "&gt;&lt;BR /&gt; &lt;SPAN&gt;this&lt;/SPAN&gt;&lt;/STRONG&gt;&lt;SPAN style="border: none windowtext 1.0pt; padding: 0in; color: #333333; background: white; font-size: 9.0pt; "&gt;.&lt;/SPAN&gt;&lt;SPAN style="border: none windowtext 1.0pt; padding: 0in; color: #333333; background: white; font-size: 9.0pt; "&gt;map&lt;/SPAN&gt;&lt;SPAN style="border: none windowtext 1.0pt; padding: 0in; color: #333333; background: white; font-size: 9.0pt; "&gt;.&lt;/SPAN&gt;&lt;SPAN style="border: none windowtext 1.0pt; padding: 0in; color: #333333; background: white; font-size: 9.0pt; "&gt;disableScrollWheelZoom&lt;/SPAN&gt;&lt;SPAN style="border: none windowtext 1.0pt; padding: 0in; color: #333333; background: white; font-size: 9.0pt; "&gt;() – but I have no idea where to insert this. &lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="border: none windowtext 1.0pt; padding: 0in; color: #333333; background: white; font-size: 9.0pt; "&gt;&amp;nbsp;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="border: none windowtext 1.0pt; padding: 0in; color: #333333; background: white; font-size: 9.0pt; "&gt;I also found this snippet of JavaScript, but again do not know where to begin: &lt;/SPAN&gt;&lt;SPAN style="font-size: 10.5pt; color: #595959; background: #F8F8F8;"&gt;view.on(&lt;/SPAN&gt;&lt;SPAN style="font-size: 10.5pt; color: #c41a16;"&gt;"mouse-wheel"&lt;/SPAN&gt;&lt;SPAN style="font-size: 10.5pt; color: #595959; background: #F8F8F8;"&gt;, &lt;/SPAN&gt;&lt;STRONG style="color: #aa0d91; font-size: 10.5pt; "&gt;function&lt;/STRONG&gt;&lt;SPAN style="font-size: 10.5pt; color: #595959;"&gt;(&lt;/SPAN&gt;&lt;SPAN style="font-size: 10.5pt; color: #5c2699;"&gt;event&lt;/SPAN&gt;&lt;SPAN style="font-size: 10.5pt; color: #595959;"&gt;) &lt;SPAN style="background: #F8F8F8;"&gt;{&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P style="margin-bottom: .0001pt;"&gt;&lt;SPAN style="font-size: 10.5pt; color: #595959; background: #F8F8F8;"&gt;&amp;nbsp; &lt;/SPAN&gt;&lt;EM style="color: #006a00; font-size: 10.5pt; "&gt;// prevents zooming with the mouse-wheel event&lt;/EM&gt;&lt;/P&gt;&lt;P style="margin-bottom: .0001pt;"&gt;&lt;SPAN style="font-size: 10.5pt; color: #595959; background: #F8F8F8;"&gt;&amp;nbsp; event.stopPropagation();&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="font-size: 10.5pt; color: #595959; background: #F8F8F8;"&gt;});&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;This is what my embedded webapp code currently looks like in wordpress (everything comes up, but there is still the scroll issue).&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&amp;lt;style&amp;gt;.embed-container {position: relative; padding-bottom: 80%; height: 0; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px;}&amp;lt;/style&amp;gt;&amp;lt;div class="embed-container"&amp;gt;&amp;lt;iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="Nature Preserves of the Lancaster County Conservancy- Near Me 1" src="https://7871lccon.lcc.local:3344/webappbuilder/apps/2/"&amp;gt;&amp;lt;/iframe&amp;gt;&amp;lt;/div&amp;gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;I recently completed a training on Web AppBuilder for Developers and am getting more comfortable with navigating through that, if anyone has solutions.&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;Thanks!&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Fri, 12 Apr 2019 21:13:43 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-instant-apps-questions/can-i-disable-scroll-wheel-in-web-appbuilder/m-p/748715#M364</guid>
      <dc:creator>Anonymous User</dc:creator>
      <dc:date>2019-04-12T21:13:43Z</dc:date>
    </item>
  </channel>
</rss>

