javascript - 如果选项卡不可见则可见

Question

我制作了一个可滚动的选项卡列表，并希望当用户滚动时，单击每个选项卡时，滚动到该选项卡的左侧，如果选项卡已经不可见(我的意思是从屏幕溢出)，则更喜欢:

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>

到目前为止我尝试过，获得每个元素的左偏移量并滚动到它，但它没有按预期工作。

Answer 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>