如何设置包装 div 的高度以防止响应式滑块/自动收录器后内容跳转？

Posted 2023-03-06

【中文标题】如何设置包装 div 的高度以防止响应式滑块/自动收录器后内容跳转？

【英文标题】：How to set the height of a wrapping div to prevent jumps in the content after a responsive slider/ticker?

【发布时间】：2013-05-06 09:06:27

【问题描述】：

我只用几行代码做了一个超级简单的股票/滑块东西，它有点响应。

请参阅the code at jsBin 和 the Demo（调整屏幕大小，观察自动收报机的大小调整。）

基本的 html 结构是：

<div id="tickerwrap">
    <ul id="ticker">
        <li>Item 1</li>
        <li>Item 2</li>
        etc.
    </ul>
</div>
<div>Another div content</div> 

而 jQuery 只是：

function ticker () 
    $('#ticker li:first').slideUp (function () 
        $ (this).appendTo ($ ('#ticker')).slideDown ();
    );


setInterval (function () ticker (); , 2500);

我的问题是计算包装 div 的高度 (#tickerwrap)...

如何防止“跳转”后跟另一个div？见this demo。

添加到DOM时如何计算或设置div的高度？

我曾尝试添加ticker.stopPropagation(); 和ticker.preventDefault();，但效果不佳。

我也希望高度/位置响应。

【参考方案1】：

如果不假设代码项目的数量或高度（除非我们假设有超过 2 个），您几乎需要使用 javascript 来设置 #tickerwrap 的大小。要使其响应窗口大小调整，请使用带有时间延迟的 jQuery 的 .resize()。

所以，添加此代码 (See the demo)：

function sizeTickerwrap () 
    var tickerUL        = $('#ticker');
    var numTickerItems  = tickerUL.children ('li').length;
    if (numTickerItems  < 3)
        return;

    //-- The second item will not be in a slide animation.
    var itemHeight      = tickerUL.children ('li:eq(1)').outerHeight (true);
    //-- Adjust for the containing <ul>
    var wrapHeightAdjst = tickerUL.outerHeight (true) - tickerUL.height ();

    $("#tickerwrap").height (numTickerItems * itemHeight + wrapHeightAdjst);


//-- Initial call after a settling delay
setTimeout (sizeTickerwrap, 1200);

$(window).resize ( function () 
    /*-- Time-delay the resize response to give browser a chance to settle
        and avoid bogging down the UI.
    */
    this.resizeTimer    = this.resizeTimer || null;
    if (this.resizeTimer)
        clearTimeout (this.resizeTimer);

    this.resizeTimer    = setTimeout (sizeTickerwrap, 200);
 );

【讨论】：

谢谢，看起来.. 很棒。而且比我预期的要复杂得多..（或我的技能）。谢谢 。它实际上与我尝试做的事情相同的想法，但没有完成的技能：jQuery("#tickerwrap").css( "height", jQuery("#k99-scroll-samurai first:li") *4);

不客气。请注意，我在代码中有一个小错字（是+；应该是-；见the edit）。

嗨，我花时间研究了你的 sctipt（只是在学习更好的 js 的阶段，并试图学习 .. ），我注意到你的脚本假设所有 li 元素都会高度相同（通过测量第二个li(eq:1) 并相乘）。我只是想知道你为什么不把所有元素的高度放在一起？是因为他们正在改变吗？有没有办法在滑动动作开始之前测量元素？因为否则当元素高度不同时脚本计算错误。（jsbin.com/exahaz/11/edit）

您可以在滑动动作开始前一次测量高度。但是在此之后测量调整大小的高度变得非常棘手。可能最好为此要求打开一个新问题。

好的，非常感谢您的帮助，我从您的代码中学到了很多 :-)