読者です 読者をやめる 読者になる 読者になる

文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

【新サイト開発不定期日誌】Material Design Liteがなんかおかしい件

開発日誌

おかしいwww.getmdl.io
新サイトを開発するにあたり、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)」という情報がワラワラと出てきました。

例えば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");
Here's a codepen example - http://codepen.io/mdlhut/pen/BNeoVa

http://stackoverflow.com/questions/32035052/material-design-lite-and-jquery-smooth-scroll-not-working

このレスにある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