0

jquery ajax メソッドを使用してさまざまなコンテンツ div を読み込むと、私のコンテンツ div (リンクをクリックするたびに置き換えられる div) には、overflow:auto CSS がありますが、ページを読み込むと、別のスクロールバーが追加されます。コンテンツ div のように...

css オーバーフロー:ajax による自動

各ページで実際にこのように表示されると...

ここに画像の説明を入力

これが私のjsです...

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#links li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-4)){
            var toLoad = hash+'.html #cont';
            $('#cont').load(toLoad)
        }
    });

    $('#links li a').click(function(){

        var toLoad = $(this).attr('href')+' #cont';
        $('#cont').hide('fast',loadContent);
        $('#load').remove();
        $('#wrap').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
        function loadContent() {
            $('#cont').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#cont').show('fast',hideLoader('fast'));
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });
});

そして、これは私のコンテンツ div の CSS です...

#cont {
    overflow:auto ;
    margin:0 auto ;
    width:736px ;
    height:341px ;
    padding: 0 0 0 6px ;
}

余分なスクロールバーの理由を考えられる人、または回避策を考えられる人はいますか?

PHP インクルード ファイルを使用してコンテンツをロードしています...

<!DOCTYPE html>
<html>
    <head>
        <title>I.C.T - St. Patrick's Academy, Lisburn</title>
        <link rel="stylesheet" type="text/css" href="assets/css/style.css">
        <script type="text/javascript" src="assets/js/jq.js"></script>
        <script type="text/javascript" src="assets/js/js.js"></script>
    </head>

    <body>
        <div id="wrap">
                <?php include("includes/head.php"); ?>
            <div id="screen">
                <div id="pad">
                </div>

                <?php include("includes/home.php"); ?>

            </div>
        </div>
    </body>
</html>
4

2 に答える 2

1

それが機能するようになり、コンテンツラッパーを使用してoverflow:autoを使用することにしました。javascriptで何も変更する必要はありませんでした:)

于 2013-02-06T17:29:03.630 に答える
0

PHP インクルードを介して追加されているコンテンツを含む完全な HTML を確認しないと、これに確実に答えるのが少し難しくなります。

コードに基づいて、#contコンテナを内部で複製しているようです。overflow: autoネストされたスクロールバーが継続的に追加されるためです。

セレクターで使用する.load()と、選択された要素とそのコンテンツが取得されます。jQuery Loading Page Fragmentsを参照してください。

この問題を解決するには、メインの HTML で別のコンテナーを使用することをお勧めします。このコンテナーは、読み込まれたコンテンツのレセプタクルとして機能し、スタイルはありません。次に、JS コードを変更して、そのコードにロードします。

function loadContent() {
    $('#content-wrapper').load(toLoad, '', showNewContent());
}

jsfiddle - 悪い振る舞い(例: 悪い振る舞いのみ)

jsfiddle - 修正された動作

于 2013-02-05T21:57:24.577 に答える