Question

我必须使用没有任何jQuery插件的香草javascript创建与以下演示相同的滚动效果。 https://www.ls.graphics/dsk这是已经完成此功能的演示URL。我在说的是http://prntscr.com/o48jcb这部分，它是顶部的第三部分。

我已经尝试过了，但是在这里我可以进行水平滚动，但是不能进行垂直滚动。

jQuery(function ($) {
    $.fn.hScroll = function (amount) {
        amount = amount || 120;
        $(this).bind("DOMMouseScroll mousewheel", function (event) {
            var oEvent = event.originalEvent, 
                direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta, 
                position = $(this).scrollLeft();
            position += direction > 0 ? -amount : amount;
            $(this).scrollLeft(position);
            event.preventDefault();
        })
    };
});

$(document).ready(function() {
    $('#box').hScroll(60); // You can pass (optionally) scrolling amount
});

#box {
    overflow-y: visible;
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    margin: 0;
    padding: 0;
    clear: both;
    border-spacing: 5px;
}
.item {
    display: flex;
    
    min-width: 240px;
    width: 240px;
    font-size: 140px;
    border: 2px solid #d1d1d1;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    white-space: normal;
    line-height: 1.6;
    vertical-align: top;
    text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
 <div class="item">5</div>
 <div class="item">6</div>
 <div class="item">7</div>
 <div class="item">8</div>
 <div class="item">9</div>
<div id="box">
    <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
   <div class="item">5</div>
   <div class="item">6</div>
   <div class="item">7</div>
   <div class="item">8</div>
   <div class="item">9</div>
 </div>
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
 <div class="item">5</div>
 <div class="item">6</div>
 <div class="item">7</div>
 <div class="item">8</div>
 <div class="item">9</div>
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
 <div class="item">5</div>
 <div class="item">6</div>
 <div class="item">7</div>
 <div class="item">8</div>
 <div class="item">9</div>
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
 <div class="item">5</div>
 <div class="item">6</div>
 <div class="item">7</div>
 <div class="item">8</div>
 <div class="item">9</div>

这里我可以创建水平滚动，但是一次不能进行垂直滚动。

我需要与上述站点已经完成的功能相同的功能，例如垂直滚动，然后水平滚动，然后再次使用香草JavaScript进行垂直滚动，而没有任何jQuery插件。

需要在水平之后创建垂直，然后在垂直滚动之后创建

0 个答案: