materialize.css/jsのバグの原因箇所を追求したい

Question

ご覧いただきありがとうございます。

現在、マテリアルデザインをベースとしたホームページを作っており、materialize.css/jsを利用しております。
http://materializecss.com/

JavaScriptを書き進める中で1つ困ったことがございました。
materializeを読み込んでいると、どうもスクロールイベントの取得、scrollTopの取得がうまくできないのです。

例1)

	//Smooth scroll
	$(function(){
		$('a[href^=#]').click(function() {
			var speed = 500;
			var href= $(this).attr("href");
			var target = $(href == "#" || href == "" ? 'html' : href);
			var position = target.offset().top;
			$('html,body').animate({scrollTop: position}, speed, 'swing');
		});
	});

最終行のscrollTopが取得できていないようでanimateが実行されません。
＊他の箇所のanimateは動くのでanimate自体には問題がないと考えています。

例2)

//Display Fixed Estimate Btn
 $(window).scroll(function() {
  console.log('aaa');
  var fixedEstimateBtn = $('#fixed-estimate-btn');
  if ($(this).scrollTop() > 100) {
   fixedEstimateBtn.animate({bottom:'0'}, 500);
  }
 });

console.log('aaa')が出てこない。スクロールイベントが取得できておりません。

materialize.cssとjsの読み込みを止めると、ソース通りに動きます。
materialize.jsの中に原因があるのではないかと想定されますが、同じ状況で中身を改修した方、追求にご興味をお持ちの方がおられましたら、アドバイスを頂戴できますと幸いです。

どうぞよろしくお願いいたします。

Answer 1

質問の内容のみだと特に問題はありません。
素のmaterializeに例1と例2を追加してみましたが動作します。

恐らくはscroll処理より上に書かれているコードにエラーがあり処理が止まっているのではないかと思います。

Comments

[退会済みユーザー]

ご回答ありがとうございました。
ご指摘頂戴したので改めて3名で追求したところ、html,bodyにつけていたstyleのoverflow-x: hidden;が原因でございました。
解決致しました、ありがとうございます。

なお、、overflow-x: hidden;があると何故スムーススクロールができないのか、スクロールイベントが取得できないのかが分かりかねるのですが、何かご存知でしたらお教え頂けますと幸いです。overflow-yなら縦なので理解しやすいのですが。

[gin]

うーん、そこは違うような気がしますが…
私のほうでも試しに「overflow-x: hidden;」を付けてみましたが問題なく動きます。

現在の動く状態で新たに「html,body { overflow-x: hidden; }」を指定してみたら動かなくなります？

[退会済みユーザー]

ginさん
お返事遅くなり申し訳ございません。通知を逃しておりました。
私のほうではoverflow-x: hidden;の指定ありなしで動きが変わりました。height:100%ですとかcssでいろいろ組んでおりましたので、何らかの組み合わせでの状況だったかと思われます。
お試しありがとうございました！！