不能向下滚动

时间:2017-07-24 08:53:58

标签: html mobile scroll

我正在尝试向下滚动以下网站,在移动视图中我不能,有任何建议吗?非常感谢

事情就是我明白,由于我正在使用的菜单,这可能会发生,但我无法在HTML中将其作为正常的

滚动。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    
     
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link href='http://fonts.googleapis.com/css?family=Raleway:100,200,300,400' rel='stylesheet' type='text/css'>

    <!-- build:js modernizr.touch.js -->
    <script src="elastic/modernizr.touch.js"></script>
    <!-- endbuild -->

    <link href="elastic/index.css" rel="stylesheet">
    <!-- build:css mfb.css -->
    <link href="elastic/mfb.css" rel="stylesheet">
    <!-- endbuild -->
    
    
        <link rel="stylesheet" href="elastic/style.css">

    <style>
    .ion-location{
 
  color : #FB0000;
}
  .ion-social-facebook{
 
  color : #3b5998;
}
  .ion-social-googleplus{
 
  color :  #d34836;
}
  .ion-social-instagram-outline{
 
  color : #3f729b;
}

    </style>
    
    
  </head>

  <body>



<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="elastic/ionic.css" rel="stylesheet">
<script src="elastic/ionic.bundle.js"></script>



<ion-header-bar class="bar-positive bar bar-header disable-user-behavior" >

	<h1 class="title">Sobre mí</h1>
</ion-header-bar>

<ion-content delegate-handle="example-scroller" elastic-header="example-elastic-header" overflow-scroll="false" class="scroll-content ionic-scroll  has-header"><div class="scroll" style="transform: translate3d(0px, -1px, 0px) scale(1);" >
	<div id="example-elastic-header" class="background-image" style="transform-origin: center bottom 0px; transform: translate3d(0px, 0.5px, 0px) scale(1, 1); background-image: url(&quot;los7aguacates.jpg&quot;);"></div>

	<div class="content">
		<div class="padding">
			<h1>Los 7 aguacates </h1>
			<p>Mi vida ha estado siempre marcada por mis grandes amores y pasiones:<br><br>
				-	La nutrición, y la posibilidad de “curar lo incurable” a través de una alimentación adecuada.<br><br>
				-	La gente, y la posibilidad de mejorar su vida, aumentar la autoestima, transformar la mente y acompañar a las personas durante el proceso de cambio mientras observo los maravillosos pasos hacia la salud y el bienestar.<br><br>

				-	Mi país, Polonia y España, que por elección es mi segunda casa.<br><br>
				-	Los aguacates, que no sé muy bien por qué, pero se han hecho una parte inseparable de mí ;)
				"</p>
			<p>Justo por eso estoy donde estoy, hago lo que hago y …!quiero seguir! </p><p>

			Todos tenemos el poder de impactar en la vida de otra persona. ¿Por qué no aprovecharlo para mejorar la salud y la calidad de vida de los demás? Quiero que la buena alimentación se haga viral (¡ya ves que necesito tu ayuda para ello!) e impacte en todas las personas, mostrando también a los peques (¡que son las nuevas generaciones!) qué significa comer bien y cómo. A través de una vida saludable, se pueden evitar muchos problemas de salud. 

			</p><p>Únete a mi movimiento, al movimiento de los7aguacates, un movimiento que promueve la alimentación sana como forma de vida, como base para una existencia más plena y feliz. ¡Un movimiento que quiere “curar lo incurable”! Comiendo bien, compartiendo recetas, dando ejemplo tú también impactas positivamente en los demás, ¿quieres ser mi ayudante? Te necesito, necesito tu impacto para llegar a otras personas. ¡Formemos un equipo! Comer bien es fácil y divertido. ¡Yo te lo mostraré!</p>
		</div>
		<div class="list">

		</div>
	</div>
	</div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="transform: translate3d(0px, 1px, 0px) scaleY(1); height: 356px;"></div></div></ion-content>
<ul id="menu" class="mfb-component--tr mfb-fountain " data-mfb-toggle="hover">
	<li class="mfb-component__wrap">
		<a href="#" class="mfb-component__button--main">
			<i class="mfb-component__main-icon--resting ion-navicon-round"></i>
			<i class="mfb-component__main-icon--active ion-close-round"></i>
		</a>
		<ul class="mfb-component__list">
			<li>
				<a href="external://https://www.facebook.com/los7aguacates/" data-mfb-label="Sígueme en Facebook" class="mfb-component__button--child">
					<i class="mfb-component__child-icon ion-social-facebook"></i>
				</a>
			</li>
			<li>
				<a href="external://https://www.instagram.com/los7aguacates/" data-mfb-label="Sígueme en Instagram" class="mfb-component__button--child">
					<i class="mfb-component__child-icon ion-social-instagram-outline"></i>
				</a>
			</li>
			<li>
				<a href="external://https://play.google.com/store/apps/details?id=com.mubiquo." data-mfb-label="Valora la app" class="mfb-component__button--child">
					<i class="mfb-component__child-icon ion-heart"></i>
				</a>
			</li>
		</ul>
	</li>
</ul>

<section id="panel" class="panel">




</section>
<!-- build:js mfb.js -->
<script src="elastic/mfb.js"></script>
<!-- endbuild -->
<script>

	var panel = document.getElementById('panel'),
		menu = document.getElementById('menu'),
		showcode = document.getElementById('showcode'),
		selectFx = document.getElementById('selections-fx'),
		selectPos = document.getElementById('selections-pos'),
		// demo defaults
		effect = 'mfb-zoomin',
		pos = 'mfb-component--br';

	showcode.addEventListener('click', _toggleCode);
	selectFx.addEventListener('change', switchEffect);
	selectPos.addEventListener('change', switchPos);

	function _toggleCode() {
		panel.classList.toggle('viewCode');
	}

	function switchEffect(e){
		effect = this.options[this.selectedIndex].value;
		renderMenu();
	}

	function switchPos(e){
		pos = this.options[this.selectedIndex].value;
		renderMenu();
	}

	function renderMenu() {
		menu.style.display = 'none';
		// ?:-)
		setTimeout(function() {
			menu.style.display = 'block';
			menu.className = pos + effect;
		},1);
	}

</script>



<script src="elastic/index.js"></script>

</body>
</html>

0 个答案:

没有答案