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

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

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

おかしい

f:id:treeapps:20170808011258p:plain

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)」という情報がワラワラと出てきました。

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");
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