0

我使用 jquery ajax 方法加载不同的内容 div，我的内容 div（每次单击链接时都会被替换的 div）有溢出：自动 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

让它工作，决定使用内容包装器并在其上设置溢出：自动，不需要更改 javascript 上的任何内容 :)

于 2013-02-06T17:29:03.630 回答
0

如果没有看到完整的 HTML，包括通过 PHP 添加的内容，很难确定地回答这个问题。

根据您的代码，您似乎正在复制#cont容器本身。因为它有overflow: auto它会不断添加更多嵌套滚动条。

当您使用.load()选择器时，它会获取所选元素及其内容。请参阅jQuery 加载页面片段。

为了解决这个问题，我建议在你的主 HTML 上使用一个不同的容器，它只是作为加载内容的容器，没有任何样式。然后修改您的 JS 代码以加载到该代码中。

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

jsfiddle - 不良行为（仅例如不良行为）

jsfiddle - 固定行为

于 2013-02-05T21:57:24.577 回答