javascript - 如何独立滚动 2 个不同的面板？

Question

所以我有 2 个并排的面板，它们通过向上和向下按钮滚动。

目前两个面板同时上下滚动，我需要的是让它们完全独立。

See DEMO

谢谢!

HTML

<div class="wrapper-left">
<div class="news-container">
    <div class="news-content">
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
    </div>
</div>

<a href="#" id="up">Up</a>
<a href="#" id="down">down</a>
</div>
<div class="wrapper-right">
<div class="products-container">
    <div class="products-content">
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum dolor sit amet,</p>
    </div>
</div>
</div>
<a href="#" id="up2">Up</a>
<a href="#" id="down2">down</a>

Javascript

$(document).ready(function() {
    if ($('.news-content, .products-content').height() > $('.news-container, .products-container').height()) {
        $("#down, #down2").hover(function () {
            animateContent("down");
        }, function() { $('.news-content, .products-content').stop(); });

        $("#up").hover(function () {
            animateContent("up");
        }, function() { $('.news-content, .products-content').stop(); });
    }
});
function animateContent(direction) {  
    var animationOffset = $('.news-container, .products-container').height() - $('.news-content, .products-content').height();
    if (direction == 'up') {
        animationOffset = 0;
    }
    $('.news-content, .products-content').animate({ "marginTop": animationOffset + "px" }, "1500");
}
$('html').on('click','a.up, a.down, a.up2, a.down2',function(event){
event.preventDefault();
});

Answer 1

正如 sgroves 所说，您在两个 div 上都调用了 animate。

要修复它，您需要将产品滚动与新闻滚动分开绑定(bind)。

这是一个jsfiddle .

$(document).ready(function () {
    bindEvents('news');
    bindEvents('products');
});

function bindEvents(prefix) {
    if ($('.' + prefix + '-content').height() > $('.' + prefix + '-container').height()) {
        $('#' + prefix + '-down').hover(function () {
            animateContent(prefix, 'down');
        }, function () {
            $('.' + prefix + '-content').stop();
        });
        $('#' + prefix + '-up').hover(function () {
            animateContent(prefix, 'up');
        }, function () {
            $('.' + prefix + '-content').stop();
        });
    }
}

function animateContent(prefix, direction) {
    var animationOffset = $('.' + prefix + '-container').height() - $('.' + prefix + '-content').height();
    if (direction == 'up') {
        animationOffset = 0;
    }
    $('.' + prefix + '-content').animate({
        'marginTop': animationOffset + 'px'
    }, '1500');
}

我还修改了你的html:

<div class="wrapper">
    <div class="news-container">
        <div class="news-content">
            <p>Lorem ipsum dolor sit amet,</p>
            <p>Lorem ipsum dolor sit amet,</p>
        </div>
    </div> <a href="#" id="news-up">Up</a>
 <a href="#" id="news-down">down</a>
</div>
<div class="wrapper">
    <div class="products-container">
        <div class="products-content">
            <p>Lorem ipsum dolor sit amet,</p>
            <p>Lorem ipsum dolor sit amet,</p>

        </div>
    </div> <a href="#" id="products-up">Up</a>
 <a href="#" id="products-down">down</a>
</div>

和CSS:

.wrapper {
    float:left;
    padding: 10px;
}
.news-container, .products-container {
    height: 300px;
    width: 200px;
    background: #ccc;
    padding: 0 10px;
    overflow: hidden;
}
.news-content {
    background:#61DAED;
}
.products-content {
    background:#EDC261;
}
a#news-up, a#news-down {
    color: red;
}
a#products-up, a#products-down {
    color: green;
}