トランスビット
トランスビットの開発ノート Webサイト制作に役立つTipsやトラブルシューティングなどの備忘録

jQueryのドロワープラグインSlidebarsとスムーススクロール

今やってる案件でiPhoneでの読込が異常に遅く、外の人から「重いから軽くして」と頼まれました。
原因はドロワーでした。script切るとサクサク…。
ちなみに、jQueryのドロワーといえば、これだと思っております。おすすめです。
Slidebars

バージョンが2に上がったことは去年の11月には既に知っていた(!)のですが、メニューとコンテンツのゾーン分けにcanvas使うようになっていて、既存のcssの書き換えやらなんやらに時間取られたら嫌やなーと、手を出しておりませんでした。(jQueryは1.12以降)
そして、canvasっていうと図形描写やんか、と思っていたので、正直戸惑いも強く。
html5ゲームとか作る以外にも使い道あったんやなぁ、と。

で、最初に入れていたバージョン1系を2系に換装したら、読込もサクサクになって喜んでいたんですが、今度はTOPに戻るボタンが動かない……。
どう考えてもSlidebarsが真っ黒なのでよーく見てみると、slidebars.min.cssのせいでした。

/* ---------------------------------------------
body,html{width:100%;height:100%;overflow:hidden}
が原因。
実はwidth:100%は無罪なんですが、なくても困らない。
--------------------------------------------- */
[canvas],[off-canvas*=push]{z-index:1}[off-canvas*=reveal],[off-canvas*=shift]{z-index:0}[canvas=container],[off-canvas],body,html{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}/*body,html{width:100%;height:100%;overflow:hidden}*/[canvas=container]{width:100%;height:100%;overflow-y:auto;position:relative;background-color:#fff;-webkit-overflow-scrolling:touch}[canvas=container]:after,[canvas=container]:before{clear:both;content:'';display:table}[off-canvas]{display:none;position:fixed;overflow:hidden;overflow-y:auto;background-color:#000;color:#fff;-webkit-overflow-scrolling:touch}[off-canvas*=top]{width:100%;height:255px;top:0}[off-canvas*=right]{width:255px;height:100%;top:0;right:0}[off-canvas*=bottom]{width:100%;height:255px;bottom:0}[off-canvas*=left]{width:255px;height:100%;top:0;left:0}[off-canvas*=overlay]{z-index:9999}[canvas],[off-canvas]{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);-webkit-transition:-webkit-transform .3s;transition:transform .3s;-webkit-backface-visibility:hidden}[off-canvas*=shift][off-canvas*=top]{-webkit-transform:translate(0,50%);transform:translate(0,50%)}[off-canvas*=shift][off-canvas*=right]{-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}[off-canvas*=shift][off-canvas*=bottom]{-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}[off-canvas*=shift][off-canvas*=left]{-webkit-transform:translate(50%,0);transform:translate(50%,0)}@media print{[canvas]{-webkit-transform:translate(0,0)!important;-ms-transform:translate(0,0)!important;transform:translate(0,0)!important}[off-canvas]{display:none!important}}

これで次回から安心。

Filed under: