###前提・実現したいこと
プラグイン「fullpage.js」(https://alvarotrigo.com/fullPage/)を用い、WEBページの作成を行っております。
その中で、「よくある質問」のページをアコーディオン形式で作成しようとしております。
(このページは、https://bootsnipp.com/snippets/QXdqRを参考に作成しております)
###発生している問題
「回答」部分を開いた際、それがブラウザの高さを超えた場合、スクロールバーが自動的に反応してくれない。(一番下まで表示してくれない)
###該当のソースコード
$(document).ready(function() { $('.accordion').find('.accordion-toggle').click(function() { $(this).next().slideToggle('600'); $(".accordion-content").not($(this).next()).slideUp('600'); }); $('.accordion-toggle').on('click', function() { $.fn.fullpage.reBuild(); $(this).toggleClass('active').siblings().removeClass('active'); }); });
###試したこと
・“scrollOverflow: true”にした。⇒スクロールバーは無事表示。
・上記の通り、“$.fn.fullpage.reBuild();”を追記。⇒上記コード参照。部分的には解決したが、以下について以前問題が発生している。
###“$.fn.fullpage.reBuild();”を追記したものの、依然発生している問題事項
・「質問」欄が最初からブラウザ高さを超える場合(すなわち、最初からスクロールバーが表示されている場合)は上手く作動したが、そうでない場合は作動しない(スクロールバーが表示されない)
・上手く作動している場合でも、一番下の部分までスクロールできない場合がある。(力技で、reBuildを重複して書くことで一応見ることはできましたが、他に解決策ありますか・・・?)
・“$.fn.fullpage.reBuild();”を作動させた際、ホームページがかなり重くなる。(特にスマホで見ると、アコーディオンの動きがかなり鈍くなる)
###補足情報
ブラウザの大きさを少しでも調整すると、上手いこといきます(長さに応じて、スクロールバーが無事に調整されます)。
もしかしたら、ここにヒントがあるのかもしれませんが・・・。
以上、どうぞ宜しくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/28 05:36