title: how to I lock just the x or y axis of a div?
body: <p>I made a small window for a tools menu but because I had to use an iframe to solve a specific issue it now scrolls left and right. I still neet it to scroll up and down but disabled the left and right.</p>
  
  <pre><code>&lt;div id="map-tools"&gt;
                  &lt;form autocomplete="off" id=vis-select style="height:100%"&gt;
                  &lt;ul id="tools-list" data-role="listview" style="height:100%"&gt;
                      &lt;li id="tools-4"&gt;
                              &lt;fieldset data-role="controlgroup"&gt;
                                  &lt;g:if test="${site.javaScriptModules.find{it.fileName=='google-map.js'} }"&gt;
                                     &lt;input name="radio-choice-v-2" id="google-map-module" value="" &lt;g:if test="${site.defaultVisualization?.fileName == 'google-map.js'}"&gt;checked="checked"&lt;/g:if&gt; type="radio" data-messages="switch-vis" data-switch-vis="#google-map" &gt;
                                      &lt;label for="google-map-module"&gt;Google Map&lt;/label&gt;
                                  &lt;/g:if&gt;
                                  &lt;g:if test="${site.javaScriptModules.find{it.fileName=='google-earth.js'} }"&gt;
                                      &lt;input name="radio-choice-v-2" id="google-earth-module" value="" &lt;g:if test="${site.defaultVisualization?.fileName == 'google-earth.js'}"&gt;checked="checked"&lt;/g:if&gt; type="radio" data-active="false" data-messages="switch-vis" data-switch-vis="#google-earth" &gt;    
                                      &lt;label for="google-earth-module"&gt;Google Earth&lt;/label&gt;
                                  &lt;/g:if&gt;
                                  &lt;g:if test="${site.javaScriptModules.find{it.fileName=='cesium.js'} }"&gt;
                                      &lt;input name="radio-choice-v-2" id="cesium-earth-module" value="" &lt;g:if test="${site.defaultVisualization?.fileName == 'cesium.js'}"&gt;checked="checked"&lt;/g:if&gt; type="radio" data-messages="switch-vis" data-switch-vis="#cesium-earth" &gt;  
                                      &lt;label for="cesium-earth-module"&gt;Cesium Earth&lt;/label&gt;
                                  &lt;/g:if&gt;     
                              &lt;/fieldset&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;/form&gt;
                  &lt;iframe id="tools-cover-earth" class="cover" frameborder="0"&gt;&lt;/iframe&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>this is the css</p>
  
  <pre><code>#map-tools{
      position:absolute;
      bottom: 44px;
      background:#ffffff;
      z-index: 10;
      width: 320px;
      height: 0px;
  }
  
  .cover{
      background:#ffffff;
      z-index: -1;
      width: 100%;
      height: 100%;
      position:absolute;
      top:0px;
      overflow-x:hidden;
      overflow-y:hidden;
  }
  </code></pre>