Webの勉強を始めて3ヶ月目です。 よろしくお願いします。
skrollrを用いてモバイル版のchromeでプレビューをしてみたところ 上にスクロールするとページのどの位置であってもスワイプで更新されてしまい困っています。(普段なら画面最上部で上にスワイプすると表示されるアレです)
skrollrを外してプレビューするとこの症状が現れないのでskrollrに原因があると踏んでいるのですが色々調べてみたのですが、英語が分からずどこをいじれば直るかわかりません。
どなたかご教授よろしくお願いします。
HTML
1コード 2<html lang="ja"> 3 4<head> 5<meta charset="utf-8"> 6<meta name="viewport" content="width=device-width,initial-scale=1.0"> 7</head> 8 9<body> 10<div id="skrollr-body"> 11<div class="backgroundcolor" /*ここにスクロールすると背景の色が変化する記述*/> 12<section class="top"> 13<div class="links"> 14 <a class="btn" href="#middle">middleへスクロール</a> 15 <a class="btn2" href="#content">contentへスクロール</a> 16 <a class="btn3" href="#bottom">bottomへスクロール</a> 17</section> 18<section class="middle" id="middle">内容</section> 19<section class="content" id="content">内容</section> 20<section class="bottom" id="bottom">内容</section> 21<footer>フッター内容</footer> 22</div>/*backgroundcolor_end*/ 23</div>/*skroll-body_end*/ 24 25/*Jqueryここから*/ 26<script src="js/jquery-1.10.2.min.js"></script> 27<script src="js/skrollr.min.js"></script> 28<script type="text/javascript"> 29/*パララックスの実行*/ 30$(function(){ 31 var skrollrIns = skrollr.init({ 32 forceHeight: false, 33 }); 34 35 $('.btn').on('click', function(e){ 36 e.preventDefault(); 37 //skrollrでアニメーションスクロール 38 skrollrIns.animateTo(1000, {duration:400, easing:'swing'}); 39 }); 40 $('.btn2').on('click', function(e){ 41 e.preventDefault(); 42 //skrollrでアニメーションスクロール 43 skrollrIns.animateTo(2000, {duration:400, easing:'swing'}); 44 }); 45 46 $('.btn3').on('click', function(e){ 47 e.preventDefault(); 48 //skrollrでアニメーションスクロール 49 skrollrIns.animateTo(3000, {duration:400, easing:'swing'}); 50 }); 51}); 52 53</script> 54</body> 55 56</html>
CSS
1コード 2 html{ 3 height: 100%; 4 } 5 6body{ 7 overflow-x: hidden; 8 height: 100%; 9 } 10 11.skrollr-body{ 12 height: 100% !important; 13 } 14 15.top, .middle, .content, .bottom{ 16 height: 1000px; 17 } 18 19
あなたの回答
tips
プレビュー