Question

我正在尝试使用这种小提琴来开发带有箭头的移动菜单。

但是有一个问题。当我添加更多列表项并按向右箭头时，它将转到列表末尾。所以我们看不到中间的li元素。

我只想通过在中间显示左右箭头并缓慢向左或向右移动来查看中间项目。

我尝试添加此代码。

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

但是没有运气。有什么想法吗？

Answer 1

您可以更改滚动量，因此，不是滚动整个宽度，而是每次滚动仅滚动固定数量的像素。要尝试此操作，您只需替换：

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

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

类似这样：

var scrollAmount = 0;

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

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

Answer 2

检查我是否按照您的意愿完成了

// 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
var scroll = $('.menu').scrollLeft();
$(rightPaddle).on('click', function() {
  scroll += ($('.menu').width() - $('.left-paddle').width() * 2);
  $('.menu').animate({
    scrollLeft: scroll
  }, scrollDuration);
});

// scroll to right
$(leftPaddle).on('click', function() {
  scroll -= ($('.menu').width() - $('.left-paddle').width() * 2);
  $('.menu').animate({
    scrollLeft: scroll
  }, scrollDuration);
});

body {
  margin: 3em;
}

* {
  padding: 0;
  margin: 0;
}

.menu-wrapper {
  position: relative;
  max-width: 400px;
  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;
  -webkit-overflow-scrolling: touch;
}
.menu .item {
  display: inline-block;
  width: 100px;
  height: 100%;
  outline: 1px dotted gray;
  padding: 1em;
  box-sizing: border-box;
}

.paddle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3em;
}

.left-paddle {
  left: 0;
}

.right-paddle {
  right: 0;
}

.hidden {
  visibility:hidden;
}

.print {
  margin: auto;
  max-width: 500px;
}
.print span {
  display: inline-block;
  width: 100px;
}

<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>
  </ul>

  <div class="paddles">
    <button class="left-paddle paddle hidden">
			<
		</button>
    <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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

如果itsm的宽度增加或减少，则将更合适。取代这个

$(rightPaddle).on('click', function() {
    $('.menu').animate( { scrollLeft: menuInvisibleSize}, scrollDuration);
});

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

仅与此

$(rightPaddle).on('click', function(e) {
        $('.menu').animate( { scrollLeft: '+=' + itemSize }, scrollDuration);
    });

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

移动设备中带有箭头的水平菜单栏

3 个答案:

检查我是否按照您的意愿完成了