如何一起使用水平和垂直滚动

Question

这里我有一个代码

<ul id="card-container">
    <li>
        <div class="card-wrap">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
</li>
<li>
    <div class="card-wrap">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
</li>

我希望#card-container能够在鼠标滚轮上水平滚动，但如果我将鼠标悬停在.card-wrap上并使用鼠标滚动滚动，则.card-wrap应垂直滚动。

现在我的代码中的两个卷轴都在一起发生。

 $('#card-container').mousewheel(function(e, delta) {
    this.scrollLeft -= (delta * 40);
    e.preventDefault();
});
$('.card-wrap').mousewheel(function(e, delta) {
    this.scrollTop -= (delta * 40);
    e.preventDefault();
});

需要一些帮助。

Answer 1

我的一位朋友帮我解决了这个问题，因此分享给大家。 这是jQuery代码：

$('#card-container').mousewheel(function(e, delta) {
     this.scrollLeft -= (delta * 40);
     e.preventDefault();
 });
$('.card-wrap').mouseenter(function(){
    $('#card-container').unmousewheel();
});
$('.card-wrap').mouseleave(function(){
    $('#card-container').mousewheel(function(e, delta) {
        this.scrollLeft -= (delta * 40);
        e.preventDefault();
    });
});  

感谢。