Question

我使用jquery ajax方法加载不同的内容div，我的内容div（每次点击链接时替换的div）都有溢出：自动CSS上面，但是当我加载页面时，它会添加另一个滚动条到我的内容div就像这样......

css overflow:auto with ajax

每个页面应该看起来真的如此......

enter image description here

这是我的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>

Answer 1

让它工作，决定使用内容包装并有溢出：自动对它，不需要在javascript上更改任何内容：）

Answer 2

如果没有看到完整的HTML，包括通过PHP包含的内容，那么肯定有点难以回答这个问题。

根据您的代码，您可能正在复制自己内部的#cont容器。因为它有overflow: auto，所以它会不断添加更多嵌套滚动条。

将.load()与选择器一起使用时，会选择所选元素及其内容。请参阅jQuery Loading Page Fragments。

要解决此问题，我建议您在主HTML上使用不同的容器，该容器只是用作加载内容的容器，并且没有任何样式。然后修改你的JS代码加载到那个。

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

jsfiddle - bad behavior（仅限不良行为）

jsfiddle - fixed beheavior

Ajax用于替换溢出的内容div：自动最终添加额外的滚动条

2 个答案: