Блог

У меня проблема с моим кодом, я пытаюсь сделать свое меню, содержащее список элементов, прокручиваемым при нажатии кнопки (левая и правая кнопки). Дело в том, что после того, как я нажимаю правую кнопку, она работает, но она не позволяет мне нажать ее снова….если я это сделаю, это ничего не даст.Так что он идет только один раз направо и один раз налево. Я хочу иметь возможность нажимать его до тех пор, пока не дойду до последнего пункта меню, и наоборот.

Мой html-код для меню:

 <div class="menu-wrapper">
    <ul class="menu">
        <li class="item active">Hair</li>
    <li class="item">Massage</li>
    <li class="item">Nails</li>
    <li class="item">Facial</li>
    <li class="item">Tattoo</li>
    <li class="item">Institue</li>
    <li class="item">Masking</li>
    <li class="item">Doudou</li>
    <li class="item">Facial</li>
    <li class="item">Tattoo</li>
    <li class="item">Institue</li>
    <li class="item">Masking</li>
    <li class="item">Doudou</li>
    </ul>

    <div class="paddles">
        <button class="left-paddle paddle hidden">
            <
        </button>
        <button class="right-paddle paddle">
            >
        </button>
</div>
  </div> 
 

Мой Css-код таков:

 .menu-wrapper {
    position: relative;
    border-radius: 10px;
    height: 50px; 
    margin: 1em auto;

    overflow-x: hidden;
    overflow-y: hidden;
}

.menu   {
    height: 50px; 
    background: white;
    box-sizing: border-box;
    padding-left: 0;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    
    
}
.item {
    display: inline-block;
    width: 155px;
    height: auto;
    text-align: center;
    box-sizing: border-box;
    padding: 10px;}
    .item.active{color: white; background-color: #6f51ed;}
.item:hover{
    cursor: pointer;
}
.paddle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2em;
}
.left-paddle {
    left: 0;
    color:#6f51ed;
    background-color: transparent;
    border-color: transparent;
 outline: none;
 font-size: x-large;
 padding-bottom: 5px;
}
.right-paddle {
    right: 0;
    color:#6f51ed;
    background-color: transparent;
    border-color: transparent;
    outline: none;
    font-size: x-large;
    padding-bottom: 5px;
}
.hidden {
    display: none;
}
 

Мой код Jquery/Js таков:

  <script>
 var scrollDuration = 450;
// paddles
var leftPaddle = document.getElementsByClassName('left-paddle');
var rightPaddle = document.getElementsByClassName('right-paddle');
// get items dimensions
var itemsLength = $('.item').length;
var itemSize = $('.item').outerWidth(true);
// get some relevant size for the paddle triggering point
var paddleMargin = 5;

// get wrapper width
var getMenuWrapperSize = function() {
    return $('.menu-wrapper').outerWidth();
}
var menuWrapperSize = getMenuWrapperSize();
// the wrapper is responsive
$(window).on('resize', function() {
    menuWrapperSize = getMenuWrapperSize();
});
// size of the visible part of the menu is equal as the wrapper size 
var menuVisibleSize = menuWrapperSize;

// get total width of all menu items
var getMenuSize = function() {
    return itemsLength * itemSize;
};
var menuSize = getMenuSize();
// get how much of menu is invisible
var menuInvisibleSize = menuSize - menuWrapperSize;

// get how much have we scrolled to the left
var getMenuPosition = function() {
    return $('.menu').scrollLeft();
};

// finally, what happens when we are actually scrolling the menu
$('.menu').on('scroll', function() {

    // get how much of menu is invisible
    menuInvisibleSize = menuSize - menuWrapperSize;
    // get how much have we scrolled so far
    var menuPosition = getMenuPosition();

    var menuEndOffset = menuInvisibleSize - paddleMargin;

    // show amp; hide the paddles 
    // depending on scroll position
    if (menuPosition <= paddleMargin) {
        $(leftPaddle).addClass('hidden');
        $(rightPaddle).removeClass('hidden');
    } else if (menuPosition < menuEndOffset) {
        // show both paddles in the middle
        $(leftPaddle).removeClass('hidden');
        $(rightPaddle).removeClass('hidden');
    } else if (menuPosition >= menuEndOffset) {
        $(leftPaddle).removeClass('hidden');
        $(rightPaddle).addClass('hidden');
}



});

// scroll to left
$(rightPaddle).on('click', function() {
    $('.menu').animate( { scrollLeft: itemSize}, scrollDuration);
});

// scroll to right
$(leftPaddle).on('click', function() {
    $('.menu').animate( { scrollLeft: -itemSize }, scrollDuration);
});
</script>
 

Поскольку вы прокручиваете одну и ту же позицию, вам необходимо добавить или вычесть из itemSize текущей позиции прокрутки .menu.

 // scroll to left
$(rightPaddle).on('click', function() {
   $('.menu').animate({
     scrollLeft: $('.menu').scrollLeft()   itemSize
   }, scrollDuration);
});

// scroll to right
$(leftPaddle).on('click', function() {
   $('.menu').animate({
     scrollLeft: $('.menu').scrollLeft() - itemSize
   }, scrollDuration);
});