触摸后禁用jQuery移动向下滚动

Question

好吧，我使用Angularjs作为计算器来插入一个jquery移动页面，它很可爱。每当我自动单击背景空白区域时，我就会想到该页面的顶部，滚动条被禁用，并且我无法访问该区域结果显示出来。这是我的代码我在做什么错误？在此先感谢

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript">
  </script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css'>
<div data-role="page" id="CALC" data-tap-toggle="false" >
  <div data-role="header" data-position="fixed">
  <h1> TO CALCULATOR TOY ΝΕΦΡΟΠΑΘΗ</h1>
  </div>
  <div data-role="content" >
  <div ng-app="myApp" ng-controller="myCtrl">
  

<p>ΕΠΙΛΕΞΤΕ ΤΡΟΦΙΜΟ ΚΑΙ ΠΟΣΟΤΗΤΑ:</p>
        <h1 class="auto-style1"><strong>ΓΕΥΜΑ1</strong></h1>
<select ng-model="selectedfood1" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity1"   ng-options="x for (x, y) in quanity">
</select>
        <h1 class="auto-style1"><strong>ΓΕΥΜΑ2</strong></h1>
<select ng-model="selectedfood2" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity2"   ng-options="x for (x, y) in quanity">
</select>
        <h1 class="auto-style1"><strong>ΓΕΥΜΑ3</strong></h1>
<select ng-model="selectedfood3" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity3"   ng-options="x for (x, y) in quanity">
</select>
        <h1 class="auto-style1"><strong>ΓΕΥΜΑ4</strong></h1>
<select ng-model="selectedfood4" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity4"   ng-options="x for (x, y) in quanity">
</select>
        <h1 class="auto-style1"><strong>ΓΕΥΜΑ5</strong></h1>
<select ng-model="selectedfood5" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity5"   ng-options="x for (x, y) in quanity">
</select>
        <h1 class="auto-style1"><strong>ΓΕΥΜΑ6</strong></h1>
<select ng-model="selectedfood6" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity6"   ng-options="x for (x, y) in quanity">
</select>
        <h1 class="auto-style1"><strong>ΓΕΥΜΑ7</strong></h1>
<select ng-model="selectedfood7" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity7"   ng-options="x for (x, y) in quanity">
</select>
        <h1 class="auto-style1"><strong>ΓΕΥΜΑ8</strong></h1>
<select ng-model="selectedfood8" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity8"   ng-options="x for (x, y) in quanity">
</select>
        <h1 class="auto-style1"><strong>ΓΕΥΜΑ9</strong></h1>
<select ng-model="selectedfood9" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity9"   ng-options="x for (x, y) in quanity">
</select>
        <h1 class="auto-style1"><strong>ΓΕΥΜΑ10</strong></h1>
<select ng-model="selectedfood10" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity10"   ng-options="x for (x, y) in quanity">
</select>


 
<h1>KAΛΙΟ: {{selectedfood1.kalio*quanity1.quanity--selectedfood2.kalio*quanity2.quanity--selectedfood3.kalio*quanity3.quanity--selectedfood4.kalio*quanity4.quanity--selectedfood5.kalio*quanity5.quanity--selectedfood6.kalio*quanity6.quanity--selectedfood7.kalio*quanity7.quanity--selectedfood8.kalio*quanity8.quanity--selectedfood9.kalio*quanity9.quanity--selectedfood10.kalio*quanity10.quanity| number:0  }}</h1>
<h2>NATPIO:{{selectedfood1.natrio*quanity1.quanity--selectedfood2.natrio*quanity2.quanity--selectedfood3.natrio*quanity3.quanity--selectedfood4.natrio*quanity4.quanity--selectedfood5.natrio*quanity5.quanity--selectedfood6.natrio*quanity6.quanity--selectedfood7.natrio*quanity7.quanity--selectedfood8.natrio*quanity8.quanity--selectedfood9.natrio*quanity9.quanity--selectedfood10.natrio*quanity10.quanity| number:0  }}</h2>
<h3>ΦΩΣΦΟΡΟΣ:{{selectedfood1.phosph*quanity1.quanity+selectedfood2.phosph*quanity2.quanity+selectedfood3.phosph*quanity3.quanity+selectedfood4.phosph*quanity4.quanity+selectedfood5.phosph*quanity5.quanity+selectedfood6.phosph*quanity6.quanity+selectedfood7.phosph*quanity7.quanity+selectedfood8.phosph*quanity8.quanity+selectedfood9.phosph*quanity9.quanity+selectedfood10.phosph*quanity10.quanity*quanity10.quanity| number:0  }}</h3>


<p>Note that the selected value represents an object.</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = {
       ΜΠΑΝΑΝΑ: {kalio : "300", natrio : "200", phosph : "100"},
       AΓΚΟΥΡΙ: {kalio : "200", natrio : "500", phosph : "85"},
       ΨΩΜΙ: {kalio: "100", natrio : "150", phosph : "90"} } 
       $scope.quanity = {
       KENO : {quanity: "0.0"},
       ENATETAPTO : {quanity : "0.25"},
       ΔΥΟTETAPTA : {quanity: "0.5"},
       TPIATETAPTA : {quanity : "0.75"},
       ENA: {quanity: "1.0"},
       ΔΥΟ : {quanity: "2.0"},
       TPIA : {quanity: "3.0"},
       TEΣΣEPA : {quanity : "4.0"},
       ΠENTE :{quanity :"5.0"},
       EΞI:{quanity:"6.0"},
       EΠTA:{quanity:"7.0"},
       OKTΩ:{quanity:"8.0"},
       ENEA:{quanity:"9.0"},
       ΔEKA:{quanity:"10.0"}}
       
  });
</script>
</div>
    </div>
 <div data-role="footer" data-position="fixed">
  <div data-role="navbar" data-iconpos="top" >
		<ul>
			<li><a href="#INTRO" data-role="button" data-icon="home">ΕΙΣΑΓΩΓΗ</a></li>
			<li><a href="#CALC" data-role="button" data-icon="grid">ΥΠΟΛΟΓΙΣΜΟΣ</a></li>
			<li><a href="#LIM" data-role="button" data-icon="info">ΟΡΙΑ</a></li>
		</ul>
  </div>
</div>