javascript - 如果 div 溢出，则使用 javascript 应用样式

Question

如果内容溢出，我正在尝试使用 javascript 设置我的容器 div 的样式。

我目前的代码是:

<div class="container" style="position: relative; height: 390px; margin-bottom: 90px; overflow-y: auto;">
     <div class="columns" style="height: auto; position: absolute;">
         some content
     </div> 
</div>

我已经制作了这个 javascript 函数，当它溢出时动态地将“box-shadow”添加到 div 的底部。它不起作用。

<script>
    $(window).resize(function(){
    $('.container').css('height', $(window).height() - 200);
    var columsheight = $('.colums').height();
    var containerheight = $ ('.container').height() -200;
    if (containerheight < columsheight){
         $('.container').css({"box-shadow" : "inset 0px -13px 8px -10px #868686"});
        }
    else{};
}).resize();
</script>

我需要一些帮助来正确设置它。

Answer 1

您看到脚本中的拼写错误了吗？

 var columsheight = $('.colums').height();

根据您的标记，应该是:

 var columsheight = $('.columns').height();

哦。哎哟。更重要的是...您的整个 jQ 窗口调整大小功能都处于不良状态。您的 resize() 函数在完成其余处理之前即将关闭:

 $(window).resize(function(){
     $('.container').css('height', $(window).height() - 200);
     var columsheight = $('.columns').height();
     var containerheight = $('.container').height();
     if (containerheight < columsheight){
         $('.container').css("box-shadow","inset 0px -13px 8px -10px #868686");
     };
}).resize();

更好的是，为了阐明您在做什么，并减少第一次 resize() 未被遗漏的机会，您可能应该做这样的事情。

function resizeContainers(){
     $('.container').css('height', $(window).height() - 200);
     var columsheight = $('.columns').height();
     // open your browser's console, and watch as your code executes
     // you should see a line written every time it goes through this function
     console.log(".columns height is: " + columsheight);
     var containerheight = $('.container').height();
     console.log("containerheight height is: " + containerheight);
     if (containerheight < columsheight) {
         $('.container').css("box-shadow","inset 0px -13px 8px -10px #868686");
     }
}

$(window).resize(resizeContainers);

resizeContainers();

这样您就可以在需要时独立调用该函数，而不必触发全窗口 resize() 事件。 window.resize() 事件特别敏感......它会被很多不同的事情触发，如果你在移动设备上使用它会变得更糟，因为一些移动浏览器将方向变化解释为 window.resize()。

好吧...现在水已经变得浑浊了，我整理了一个工作示例:

$(function () {
    // create your method for checking the resize
    function resizeContainers() {
        // get a reference to the .container element and the .columns element
        var $container = $('.container');
        var $cols = $('.columns');
        // set the height on $container
        $container.css('height', $(window).height() - 200);
        // THis is just here so you can see, as you resize the frame, 
        // that this is testing the sizes 
        $("#output").html("$cols.height() : " + $cols.height() + "\n$container.height() : " + $container.height());
        // Now compare the height of the $cols item to the $container height
        if ($cols.height() > $container.height()) {
            $container.css("box-shadow", "inset 0px -13px 8px -10px #868686");
        } else {
            // this will remove the box shadow when the content does not exceed
            // the container height
            $container.css("box-shadow","");   
        }
    }

    // Now, tell the window object to listen for resize events and call resizeContainers
    $(window).resize(resizeContainers);
    // Call it manually once
    resizeContainers();
});

您可以在 http://jsfiddle.net/mori57/wV7Vt/ 上实际看到这一点

观察输出 div 并在输出窗口周围拖动框架条以观察值的变化。