4

ユーザーが別の div をホバーすると下にスクロールするスクロール可能な div を作成したいと考えています。スクロール可能な div 内のコンテンツが変更される (テキストのみになる) ため、その DIV の絶対的な高さの値を設定できません。これが、div の高さが「自動」である理由です。

「.post-right」divのCSSで絶対高さの値を設定すると機能するソリューションに入りましたが、divの高さが「auto」の場合は値を返しません。

jQuery のコード ブロックを (document).ready 関数にも配置しようとしましたが、結果はまったく同じです。

何か案は？前もって感謝します。

HTML コード:

<div class="post-right-cont">
    <div class="post-right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam libero ut nisi consectetur pretium. Donec auctor auctor mauris, in tempor mauris blandit et. Aliquam nibh felis, tincidunt a auctor vel, feugiat at enim. Duis faucibus porta mi ut fringilla. Pellentesque eleifend erat a tellus aliquam sodales. Nullam lorem tellus, accumsan quis laoreet id, luctus et urna. Curabitur eleifend tellus non orci ullamcorper adipiscing. Integer est tellus, bibendum at ultricies a, viverra at orci. Curabitur porta tincidunt nunc, at placerat ipsum malesuada et. Vivamus et est purus, id suscipit tortor. Curabitur turpis metus, dapibus et consectetur non, tincidunt in est. Vestibulum nisl libero, sodales sit amet auctor eu, congue at velit. Vivamus et erat massa, nec viverra risus. Fusce iaculis dolor vel augue ornare accumsan.<br/><br/>

    Quisque a metus arcu. Suspendisse hendrerit commodo justo in sagittis. Phasellus a scelerisque quam. Fusce lacinia lacinia justo. Duis id hendrerit enim. Sed eleifend eros et turpis rutrum consectetur. Maecenas pulvinar volutpat odio, non imperdiet augue pretium quis. Proin rutrum, est vitae auctor dapibus, diam dolor rutrum libero, sed feugiat metus turpis sed mauris. Sed eleifend dolor arcu. Cras laoreet nibh convallis magna congue sit amet consequat tortor porttitor. Duis et mauris non lorem consectetur luctus. Aliquam mollis sem sit amet tortor iaculis egestas. Duis tincidunt pellentesque leo, nec vulputate turpis dapibus sit amet. Aliquam rhoncus luctus orci, et aliquet eros porttitor in. Etiam arcu eros, viverra tristique tincidunt vel, facilisis et mauris.<br/><br/>

        Morbi congue auctor luctus. Sed nisl dui, varius id ornare et, tincidunt sit amet enim. Aliquam egestas ultricies nisl, id condimentum erat fermentum quis. Morbi lectus nunc, aliquam volutpat egestas quis, iaculis a nulla. Pellentesque fermentum mauris at libero pulvinar viverra. Aliquam a ante orci, a luctus purus. Vivamus ut est ut mauris pulvinar mattis ac et magna. Aenean congue dictum lectus at suscipit. Suspendisse interdum, erat pulvinar gravida vulputate, mi mauris feugiat justo, at euismod augue sapien eu sapien. Praesent at quam purus. In hac habitasse platea dictumst. Fusce vel tellus a massa tempor volutpat a at magna. In eu enim odio. Quisque bibendum tortor est. Phasellus a scelerisque quam. Fusce lacinia lacinia justo. Duis id hendrerit enim. Sed eleifend eros et turpis rutrum consectetur. Maecenas pulvinar volutpat odio, non imperdiet augue pretium quis. Proin rutrum, est vitae auctor dapibus, diam dolor rutrum libero, sed feugiat metus turpis sed mauris. Sed eleifend dolor arcu.
    </div>
    <div class="scroll-down"></div>
    <div class="scroll-up"></div>
</div>

CSS:

.post-right-cont {
    width: 540px;
    height: auto;
    overflow: hidden;
    position: relative;
}

.post-right {
    position: absolute;
    top: 0;
    left: 20px;
    height: auto;
    width: 480px;
    padding-top: 40px;
}

jQuery:

$(window).load(function() {
// SCROLL POST

            // EDIT - post-right-cont height was set up before. I just past it here now.
    var wHeight = $(window).height();
            $('.post-right-cont').css('height', wHeight - 36);

    if ($('div.post-right').height() > $('.post-right-cont').height()) {

        $('div.scroll-down').hover(function() {animateContent('down');}, function() {
            $('div.post-right').stop();
        });

        $('div.scroll-up').hover(function() {animateContent('up');}, function() {
            $('div.post-right').stop(); 
        });
    }

    function animateContent(direction) {

        var containerHeight =  $('.post-right-cont').height();

        var textHeight = $('div.post-right').height();

        var animationOffset = textHeight - containerHeight;

        if (direction == "up") {
            animationOffset = 0;
        }

        $('div.post-right').animate({"top" : -animationOffset + "px" }, 8500);

    }
});
4

1 に答える 1

6

$('.post-right-cont').height()0位置付けのあるアイテムを1つだけ内側にラップしたため、値が返されますabsolute。したがって、絶対位置付けされた要素は、のサイズを大きくしません.post-right-cont。したがって、jQueryは正しい値を返します- 0。絶対位置の要素はラッピングタグの高さや幅を増加させないため、の高さは の高.post-rightさを増加させません。.post-right-cont

于 2012-10-28T21:31:43.190 に答える