Q&A
id="main" 以下の入れ子がおかしいようなのであっているか確認してください。
手軽に慣性スクロールを実装できるものはないかと調べていたところ、
jQueryプラグイン「jquery-inertiaScroll」というものが使いやすそうだったので使ってみたのですが
画面の途中までしかスクロールをしてくれません。
どなたかご教授いただけますでしょうか。
※参照 【jQuery】jquery-inertiaScrollで慣性スクロールを実装する方法
jQueryのセレクタには#wrapの子要素を指定し、オプションでparent: $(“#wrap”)と指定していますが
ヘッダーをposition:fixedで固定しているため、今回はcontentsを子要素としています。
今回でいうとindex_cont03の半分ほどまでしかスクロールされず、
また背景色が消えてしまっています。
それぞれのsection(index_cont00 - 04)には画像等が挿入されていて
各sectionのheightはautoとしています。
HTML
1<!DOCTYPE html> 2<html class="animsition" data-animsition-in-class="fade-in-left"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title></title> 7 <meta name="description" content=""> 8 <meta name="keywords" content=""> 9 <meta name="viewport" content="width=device-width,initial-scale=1"> 10 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 11 <meta name="format-detection" content="telephone=no"> 12 <meta name="twitter:card" content="summary"> 13 <meta name="twitter:site" content=""> 14 <meta name="twitter:title" content=""> 15 <meta name="twitter:description" content=""> 16 <meta property="og:type" content="website" /> 17 <meta property="og:url" content="" /> 18 <meta property="og:site_name" content=""> 19 <meta property="og:title" content=""> 20 <meta property="og:description" content=""> 21 <meta property="og:image" content=""> 22 <meta name="twitter:image" content=""> 23 <!-- スタイルシート --> 24 <link href="css/common.css" rel="stylesheet"> 25 <link href="css/common_sp.css" rel="stylesheet"> 26 <link href="css/index.css" rel="stylesheet"> 27 <link href="css/index_sp.css" rel="stylesheet"> 28 <link href="css/swiper.min.css" rel="stylesheet"> 29 <!-- jQuery --> 30 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 31 <script src="js/header.js"></script> 32</head> 33<body> 34 35<!--<div id="top"> 36 <div id="loader-bg"></div> 37</div>--> 38<!-- gHeader --> 39<header id="gHeader"> 40 <!-- gHeadeInner --> 41 <div id="gHeaderInner"> 42 <h1><a href="./" class="animsition-link" data-animsition-out-class="fade-out-right" data-animsition-out-duration="1000"><img src="img/common/a.png" alt=""></a></h1> 43 <nav id="gNav" class="pc"> 44 <ul> 45 <li class="icon01"> 46 </li> 47 <li class="icon02"> 48 </li> 49 <li class="icon03"> 50 </li> 51 <li class="icon04"> 52 </li> 53 <li class="icon05"> 54 </li> 55 <li class="icon06"> 56 </li> 57 </ul> 58 </nav> 59 </div> 60 <!-- /gHeadeInner --> 61</header> 62<!-- /gHeader --> 63<div id="wrap"> 64<!-- contents--> 65<article id="contents"> 66 <section id="main"> 67 <!-- Slider main container --> 68 <div class="swiper-container mb60 fade"> 69 <!-- Additional required wrapper --> 70 71 <!--PC用--> 72 <div class="swiper-wrapper"> 73 <!-- Slides --> 74 <div class="swiper-slide"><a href="#"><img src="" alt="" ><img src=""></a></div> 75 <div class="swiper-slide"><a href="#"><img src="" alt="" ><img src=""></a></div> 76 </div> 77 <!-- If we need pagination --> 78 79 <div class="swiper-pagination"></div> 80 <!--<div class="swiper-button-prev"></div> 81 <div class="swiper-button-next"></div> 82 <div class="pagenation_bg"></div>--> 83 </div> 84 </section> 85 86 <section id="index_cont00"> 87 <div class=""> 88 <h3 class="news">test</h3> 89 </div> 90 </section> 91 92 <section id="index_cont01"> 93 <div class=""> 94 <h3 class="news">test</h3> 95 </div> 96 </section> 97 <section id="index_cont02"> 98 <div class=""> 99 <h3 class="news">test</h3> 100 </div> 101 </section> 102 103 <section id="index_cont03"> 104 <div class=""> 105 <h3 class="news">test</h3> 106 </div> 107 </section>--> 108 109</article> 110 111<!-- gFooter --> 112<footer id="gFooter"> 113<div class="copyright"><p>©All Rights Reserved.</p></div> 114<!-- gFooter --></footer> 115</div> 116<!-- スライダー --> 117<script src="js/swiper.min.js"></script> 118<script> 119 var mySwiper = new Swiper ('.swiper-container', { 120 loop: true, 121 slidesPerView: 'auto', 122 spaceBetween: 0, 123 centeredSlides : true, 124 autoplay:4500, 125 speed:800, 126 effect:'fade', 127 pagination: '.swiper-pagination', 128 nextButton: '.swiper-button-next', 129 prevButton: '.swiper-button-prev', 130 disableOnInteraction: false, 131 paginationClickable: true, 132 breakpoints: { 133 767: { 134 slidesPerView: 1, 135 spaceBetween: 0 136 } 137 } 138 139 }) 140</script> 141<script src="js/script.js"></script> 142<script src="js/animsition.min.js"></script> 143<script> 144 $(function () { 145 $(".animsition").animsition(); 146 }); 147</script> 148<script src="js/jquery-inertiaScroll.js"></script> 149<script> 150$(function(){ 151 $('contents').inertiaScroll({ 152 parent: $("#wrap") 153 154 }); 155}); 156</script> 157</body> 158</html> 159
またheader.jsでは固定したときずれないようヘッダーの高さ分コンテンツを下げています。
javascript
1$(function() { 2 var height=$("#gHeader").height(); 3 $("body").css("margin-top", height);//10pxだけ余裕をもたせる 4});
回答1件
0
$(function(){});は、HTMLそのものが取得できた時点でjsが実行されます。
画像とか他のロードしているものが終了しておらず、高さが0になっている可能性が高いです。
こっちで試してみるといいかもしれません
//ロードが完了したら実行 $(window).on('load',function() { var height=$("#gHeader").height(); $("body").css("margin-top", height);//10pxだけ余裕をもたせる });
投稿2020/03/26 01:33
総合スコア37
あなたの回答
tips
プレビュー
