おかしい
新サイトを開発するにあたり、UIフレームワークにMDLを採用してみたのですが、なんかjs周りがおかしいです。
jquery製の様々なプラグインが動かないのです。少なくとも、wow.js、jquery lazyload、smoothscroll、あたりは確実に動きません。
軽く試してみたところ、
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
これがあると動きませんでした。更に言うと、
<body> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
この「mdl-js-layout」があると動きません。
これは一例ですが、material design liteを使っていて「あれが動かないよ！(not work)」という情報がワラワラと出てきました。
http://stackoverflow.com/questions/32804733/google-material-design-conflict-with-other-js
例えばsmooth scrollに関しては、html,body に対してスクロールイベントを設定するのですが、MDLではこれはNGのようです。
The reason you are not seeing anything happen is because you are scrolling on the body node. MDL handles the overflow within the mdl-layout__content, this is the element you should scroll on.
So this -
$("html, body").animate({scrollTop:position}, speed, "swing");
Now becomes-$(".mdl-layout__content").animate({scrollTop:position}, speed, "swing");
http://stackoverflow.com/questions/32035052/material-design-lite-and-jquery-smooth-scroll-not-working
Here's a codepen example - http://codepen.io/mdlhut/pen/BNeoVa
このレスにあるcodepen.ioを見ると、「.mdl-layout__content」にanimationを設定しています。
http://codepen.io/mdlhut/pen/BNeoVa
wow.jsが動かないのも、恐らくこれが原因と思われます。
追記）ちょっとだけ原因が判明しました
今回使ってみて動かなかったスクロールのpluginは以下になります。
これを試していると、
$( window ).scrollTop()
が常に0を返してしまっているのが原因でした。
更に、
$( window ).scrollTop( wst + 1 );
これはMDL以外ではちゃんとスクロールしますが、MDLではスクロールしませんでした。残念ながら以下に関しても常に0が返るようです。
alert($( 'html' ).scrollTop()); alert($( 'body' ).scrollTop());
これが様々なpluginが動かない原因だと思われます。
これって相当致命的なのではないでしょうかね・・・・ほとんどのアニメーション系pluginは$(window)とか使ってるでしょうから、動くpluginの方が少ないような気がします。
ちなみに「.mdl-layout__content」に対してスクロール設定すると確かに位置も取得できてスクロールもできたんですが、タイミングによっておかしな値が取れたりして、正直挙動がよく解りませんでした。
雑感
さて困りましたね。この状態だと様々なjsのpluginが動かない事になるので、MDLを使うという選択肢自体を見直す必要がありそうです。
MDLは個人的に凄くいい感じだったのですが、どうしたものか・・・
www.bunkei-programmer.net
