第二次单击时带有箭头的水平滚动会跳过滚动位置

Question

我正在开发带有左右箭头的水平滚动条，以便平滑滚动。这个想法是我让 getMenuPosition() + '100' 向左滚动，它在第一次点击时起作用，但在第二次点击时不起作用。对于使用 getMenuPosition() - '100' 向右滚动，它按预期工作。每次用户单击箭头时，我都需要使左右滚动滚动 100。任何帮助将不胜感激！

// duration of scroll animation
var scrollDuration = 300;
// 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 = 20;

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

  // print important values
  $('#print-wrapper-size span').text(menuWrapperSize);
  $('#print-menu-size span').text(menuSize);
  $('#print-menu-invisible-size span').text(menuInvisibleSize);
  $('#print-menu-position span').text(menuPosition);

});

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

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

body {
    margin: 3em;
}

* {
    padding: 0;
    margin: 0;
}

.menu-wrapper {
    position: relative;
    max-width: 500px;
    height: 100px;
    margin: 1em auto;
    border: 1px solid black;
    overflow-x: hidden;
    overflow-y: hidden;
}

.menu   {
    height: 120px;
    background: #f3f3f3;
    box-sizing: border-box;
    
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    }
    
    .item {
        display: inline-block;
        width: 100px;
        height: 100%;
        outline: 1px dotted gray;
        padding: 1em;
        box-sizing: border-box;
    }
}

.paddles {
}
.paddle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3em;
}
.left-paddle {
    left: 0;
}
.right-paddle {
    right: 0;
}
.hidden {
    display: none;
}

.print {
    margin: auto;
    max-width: 500px;
  }
    
    span {
        display: inline-block;
        width: 100px;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-wrapper">
  <ul class="menu">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
    <li class="item">9</li>
    <li class="item">10</li>
    <li class="item">11</li>
    <li class="item">12</li>
    <li class="item">13</li>
  </ul>

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

</div>

<div class="print" id="print-wrapper-size"><span></span> Wrapper / visible menu size</div>
<div class="print" id="print-menu-size"><span></span> Total menu size</div>
<div class="print" id="print-menu-invisible-size"><span></span> Invisible menu size</div>
<div class="print" id="print-menu-position"><span></span> Scroll position</div>

Answer 1

您的代码失败，因为在 JavaScript '100' + 100 === "100100" 中。将行 scrollLeft: getMenuPosition() + '100' 更改为 scrollLeft: getMenuPosition() + 100 解决问题。

https://jsfiddle.net/k0egf12a/8/

我不明白你为什么要将字符串添加到数字中。您可能应该避免做类似的事情。因此，您也应该将 scrollLeft: getMenuPosition() - '100' 更改为 scrollLeft: getMenuPosition() - 100。

第二次单击时带有箭头的水平滚动会跳过滚动位置

Horizontal scroll with arrows skipping scroll position on second click

html

javascript

css

scroll