1

私のウェブサイトで nicescroll を使用しようとしていますが、非表示の div がある 1 つのページを除いて、どこでも機能しています。基本的に、クリックすると、以前はページで非表示になっていたコンテンツが表示されるリンクがあります。問題 - リンクをクリックしてコンテンツを表示すると、オーバーフローして表示されず、スクロールできなくなります。Nicescroll が何らかの理由で機能していません。

どちらもページ上で独自に動作します。つまり、nicescroll コードを取り出して、表示/非表示の div コードを保持すると、リンクをクリックすると、ページが長くなり、通常のスクロール バーが表示され、スクロールできるようになります。コンテンツの一番下まで。逆に、表示/非表示コードを削除して (ページの読み込み時にコンテンツを表示するだけ)、nicescroll コードを残すと、ページは長いページとして読み込まれ、nicescroll バーが表示され、問題なく動作します。 .

私は彼らを一緒に働かせることができません。ページが最初にロードされたとき、および最初に nicescroll が呼び出されたときにスクロール可能である必要がないことに関係していると思われるため、「このページで作業する必要はありません」と言ってあきらめます。それで、「ナイススクロールの起動コード」のように見えるものをコピーしてみました

<script>
  $(document).ready(function() {    
    $("#right").niceScroll();
  });
</script>

表示/非表示リンクがクリックされたときに呼び出される関数に「再起動」することを期待していましたが、それも機能しませんでした。

表示/非表示機能は次のようになります。

function showHide(shID) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID+'-show').style.display != 'none') {
            document.getElementById(shID+'-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
        }
        else {
            document.getElementById(shID+'-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';
        }
    }
}

ページの実際の div セクションは次のようになります。

 <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">-Show Stuff</a>
                <div id="example" class="more">
                    <p>
                    "Stuff here"
                    </p>
                    <p><a href="#" id="example-hide" class="hideLink" 
                    onclick="showHide('example');return false;">-Hide Stuff-</a></p>
                </div>

すべてが id="right" の div にラップされているため、nicescroll スクリプトはそれを #right に適用します (これは、表示/非表示機能がない場合でも問題なく動作します)。

何か案は？

4

2 に答える 2

1

それが正しい解決策かどうかはわかりませんが、div が表示されてメソッドを呼び出した後は正常に動作します。

$("#myHiddenDiv").getNiceScroll().onResize();
于 2015-08-08T19:38:51.477 に答える
0

まず、インラインの onclick を docready に移動します。nicescroll が #right コンテナーにアタッチされている場合は、次のことを試すことができます。

// cache container:
var $right = $('#right');

// use .on() jquery on container:
$right.on('click', '.showLink', function(e){
e.preventDefault()
$right.find('#example').show();

// resize nicescroll
$right.getNiceScroll().show().resize();

}).on('click', '.hideLink',function(e){
e.preventDefault();
$right.find('#example').hide();

// also hide nicescroll:
$right.getNiceScroll.hide();

});
于 2013-07-31T08:26:21.770 に答える