我制作了一个可滚动的选项卡列表,并希望在用户滚动时单击每个选项卡时,滚动到该选项卡的左侧,希望选项卡已经不可见(我的意思是从屏幕溢出):
jQuery('.resp-tabs-list li').click(function() {
var left = Math.round(jQuery(this).offset().left);
var scroller = jQuery(this).parent();
scroller
.animate({
'scrollLeft': left
}, 500);
});
ul {
overflow-x: auto!important;
overflow-y: hidden!important;
-webkit-overflow-scrolling: touch!important;
overflow-scrolling: touch!important;
-moz-overflow-scrolling: touch!important;
white-space: nowrap;
overflow: -moz-scrollbars-none;
}
li {
display: inline-block;
padding: 0 10px 0 10px;
border: 1px solid black;
width: 50px;
height: 30px;
line-height: 30px;
}
div#wrapper {
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<ul class="resp-tabs-list">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
</ul>
</div>
到目前为止,我尝试过做的是,使每个元素向左偏移并滚动到它,但是它没有按预期工作。
答案 0 :(得分:1)
我建议您使用绝对定位而不是实际滚动,这是它可以确保在所有地方正常工作的唯一方法。然后,您可以实现拖动功能或您自己的滚动条来移动选项卡(我添加了拖放滚动功能)。
请务必注意jQuery中offset()
和position()
之间的区别。
(function() {
var dragging=false,
lastX=null,
wrapper=jQuery("#wrapper"), //wrapper and elem are just used as cache
elem=wrapper.children(".resp-tabs-list"),
moved=false,
stopClick=false,
maxLeft=wrapper.innerWidth()-elem.outerWidth();
wrapper.on("mousedown",function(e) {
dragging=true;
moved=false;
stopClick=false;
lastX=e.clientX;
}).on("mouseup mouseleave",function(e) {
dragging=false;
//don't stop the click event if user didn't drag (assuming a normal click, you could improve this with a threshold and/or timer)
if(!moved) return;
//we can't prevent the click event on the children from mouseup, thus we use stopClick
stopClick=true;
}).on("mousemove",function(e) {
if(!dragging) return;
var d=lastX-e.clientX;
lastX=e.clientX;
var left=elem.position().left-d;
//min and max
if(left>0) left=0;
else if(left<maxLeft) left=maxLeft;
elem.css("left",left);
if(!moved&&d!=0) moved=true;
});
jQuery('.resp-tabs-list li').click(function(e) {
if(stopClick) {
stopClick=false;
e.preventDefault();
return;
}
var left = Math.round(jQuery(this).position().left);
var scroller = jQuery(this).parent();
scroller
.animate({
'left': -left
}, 500);
});
})();
ul {
overflow-x: auto!important;
overflow-y: hidden!important;
-webkit-overflow-scrolling: touch!important;
overflow-scrolling: touch!important;
-moz-overflow-scrolling: touch!important;
white-space: nowrap;
overflow: -moz-scrollbars-none;
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
}
li {
display: inline-block;
padding: 0 10px 0 10px;
border: 1px solid black;
width: 50px;
height: 30px;
line-height: 30px;
}
div#wrapper {
width: 200px;
height: 32px;
overflow: hidden;
position: relative;
user-select: none;
cursor: ew-resize;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<ul class="resp-tabs-list">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
</ul>
</div>