jquery-plugin-circlifulプラグインのanimateInViewを動作するように修正

jQueryで円グラフをアニメーションで描画するCirclifulプラグインを導入しました。

簡単でかっこいい！と思ったのも束の間、スクロールして可視領域にたどりついた時には描画が既に終わっている。

animateInViewオプションを発見して設定するも、今度は描画されず。
どうやらChromeだとバージョンによっては動作しないようで、その修正方法。

jquery.circliful.js

 function isElementInViewport() {
 // Get the scroll position of the page.
 var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') !== -1) ? 'body' : 'html');
 var viewportTop = $(scrollElem).scrollTop();
 var viewportBottom = viewportTop + $(window).height();

この321行目を下記のように修正します。

var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('edge') != -1) ? 'body': 'html, body');

jquery-plugin-circlifulはGitHubからダウンロードできます。

 

 

Hack

Posted by sio