「fullpage js」でアコーディオンを装着した場合の、スクロールバーの調整について

###前提・実現したいこと
プラグイン「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件

ベストアンサー

ソースちゃんと見たら、開始時呼び出ししてそうだとわかりました。
slideToggleなどの第二引数は、終了時のcallbackなので、こういう風にしてみたらどうでしょう

javascript
1$(document).ready(function() {
2	$('.accordion').find('.accordion-toggle').click(function() {
3		$(this).next().slideToggle('600',function(){
4			$.fn.fullpage.reBuild();
5		});
6		$(".accordion-content").not($(this).next()).slideUp('600');
7	});
8	$('.accordion-toggle').on('click', function() {
9		$(this).toggleClass('active').siblings().removeClass('active');
10	});
11});

投稿2017/07/28 05:07

zohnam

総合スコア1441

yafoo

2017/07/28 05:36

色々とご丁寧に、ありがとうございました。このコードで無事、スマホ・ＰＣで動作しました！厚く御礼申し上げます。今後ともどうぞ宜しくお願い申し上げます。

行動規範の内容に同意します

PCのウィンドウサイズが変更されたらresizeイベントが発生します。
スマホで回転が起きたら、orientationchangeイベントが発生します。
どちらも、画面サイズが変更されたときに起きるものですから、画面上の見た目を気にするライブラリは

javascript
1$(window).on("orientationchange resize", function(e){
2 // なんやかや
3});

という感じで、イベント発生時に適切な処理をするようになっているようです。

というわけで、

javascript
1$(window).trigger("resize");

とかやって、イベントを自分で発生させちゃうのはどうでしょうか。
いままで$.fn.fullpage.reBuild();と書いていたところを、このtriggerに差し替えてみて下さい。

投稿2017/07/28 01:57

zohnam

総合スコア1441

yafoo

2017/07/28 03:13

ありがとうございます。ＰＣでは無事に動きました！・・・が、残念ながらスマホでは上手くいきませんでした。（”orientationchange"もやってみたのですが・・・）スマホのブラウザでこのような概念はないものなのでしょうか・・・。度々で誠に恐れ入りますが、アドバイス等ございましたらご教示頂けるとありがたく存じます。