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

Question

我正试图用这个fiddle开发一个带有箭头的移动菜单。

Jsfillde

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

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

我尝试添加此代码。。

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

如果itesm的宽度会增加或减少，那么它将更合适。更换这个

$(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);
});