0

私のウェブサイトでは、tinyscrollbar.js とカスタム フォントを使用しています。カスタム フォントの読み込みが完了する前にスクリプトが実行されると、コンテンツの高さが正しく計算されず、スクロール領域の最後でコンテンツの一部が切り取られるという問題が発生します。

これに対して私が見つけた唯一の解決策は、document.ready() 関数の代わりに window.load() を使用してスクリプトをロードすることです。

このソリューションの問題点は、スクロール領域内のメイン コンテンツの一部ではない画像を含むすべてのページが読み込まれるまで、スクロールバーが機能しないことです。

フォントの URL で load イベントを使用することも考えましたが、ブラウザごとにフォント ファイルがあるため、これも機能しません。助けてください。

4

2 に答える 2

2

これに対して私が見つけた最善の解決策は、ドキュメントの準備ができたときにtinyscrollbarをロードし、ウィンドウのロード時に更新することです。

<script type="text/javascript">
   jQuery(document).ready(function() {
        jQuery('#scrollbar1').tinyscrollbar({ sizethumb: 50 });
    });
   jQuery(window).load(function () {
        jQuery('#scrollbar1').tinyscrollbar_update();
    });
</script>
于 2012-10-31T04:56:59.767 に答える
0

tinyscrollbar.js でタイムアウトを設定してみてください。適切なタイミングで読み込まれるまで、「400」の数値を調整するだけです。

$(document).ready(function() {
setTimeout(function() {
//Call tinyscrollbar here   
}, 400)
});

さらに良い方法は、フォントが読み込まれる正確な瞬間まで待つことです。たとえば、TypeKit は 3 つのコールバックを提供します。そのうちの 1 つを使用すると、フォントがすべて読み込まれるとすぐに別のスクリプトを呼び出すことができます: http://blog.typekit.com/2010/10/18/more-control-with-typekits -font-events/ .

Typekit を使用している場合は、次の例が提供されます。

<script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script>
<script type="text/javascript">
 try {
   Typekit.load({
     loading: function() {
       // Javascript to execute when fonts start loading
     },
     active: function() {
       // Javascript to execute when fonts become active
     },
     inactive: function() {
       // Javascript to execute when fonts become inactive
     }
   })
 } catch(e) {}
 </script>

TypeKit が状態のときに tinyscolbar を呼び出す必要がありactiveます。

于 2012-10-09T04:45:15.483 に答える