1

スクロール可能な領域内でオーバーレイを呼び出す。tinyscrollbar プラグイン ( [http://www.baijs.nl/tinyscrollbar/][1] ) を使用し、オーバーレイが呼び出されたときに、tinyscrollbar のスクロール オプションを false に設定します。これは、ヘッダー内のスクリプトです。

<script type="text/javascript">
    $(document).ready(function () {
        $('#scrollbar2').tinyscrollbar({ scroll: true });
    });
</script>

これはオーバーレイ スクリプトです。

<script>
    $(document).ready(function () {
        $("img[rel]").overlay({
            onBeforeLoad: function (event) {
                $('#scrollbar2').tinyscrollbar({ scroll: false });
            },
            onClose: function (event) {
                $('#scrollbar2').tinyscrollbar({ scroll: true});
            }
        });
    });
</script>

ご覧のとおり、onBeforeLoad でスクロールを false に設定し、onClose でスクロールを true に戻そうとしましたが、これらは無視されます。jqueryは初めてなので、これらのオプションを動的に変更する方法がわかりません。スクロール オプションを設定した後で tinyscrollbar_update() を呼び出してみましたが、効果はありませんでした。これを行う方法がわからない...

4

1 に答える 1

0

tinyscrollbar ソースにコードを追加する以外の解決策は思いつきませんでしたが、回避策は思いつきました。ページがロードされた後に tinyscrollbar を変更する唯一の方法は tinyscrollbar_update() を呼び出すことなので、オーバーレイ機能を呼び出すスクリプトで、onBeforeLoad で囲んでいる「.overview」コンテナの高さを最小の高さより小さくしました。スクロールバーを呼び出してから、tinyscrollbar_update() を呼び出します。tinyscrollbar は、自分自身をレンダリングする必要がないと判断したため、姿を消しました。次に、onBeforeClose で高さを元の値にリセットし、再び tinyscrollbar_update() を呼び出し、スクロールバーが再び表示されます。

変更されたコードは次のとおりです。

<script>
    $(document).ready(function () {
        $('#scrollbar2').tinyscrollbar();

        $('img[rel]').overlay({
            oneInstance: false,
            onBeforeLoad: function (event) {
                $('.overview').css('height','150px');
                $('#scrollbar2').tinyscrollbar_update();
            },
            onBeforeClose: function (event) {
                $('.overview').css('height','auto');
                $('#scrollbar2').tinyscrollbar_update();
            }
        });
    });
 </script>
于 2013-03-29T13:01:07.127 に答える