在按钮单击时使菜单可滚动

Posted 2023-05-08

【中文标题】在按钮单击时使菜单可滚动

【英文标题】：make menu scrollable on button click

【发布时间】：2021-10-20 05:55:27

【问题描述】：

我的代码有问题，我试图让我的菜单包含在按钮单击时可滚动的项目列表（左右按钮）。问题是在我单击右键后，它可以工作，但它不允许我再次单击它....如果我这样做什么都不做。所以它只向右一次，一次向左。我希望能够一直按住它，直到我到达菜单中的最后一项，反之亦然。

我的菜单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.activecolor: 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 & 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>

【参考方案1】：

因为是滚动到同一个位置，所以需要在.menu.的当前滚动位置上加减itemSize

// 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);
);