---
# System prepended metadata

title: 左右滑動選單定位

---


**實際操作**
https://demo.grnet.com.tw/evafter_order/demo/order_step4.php

**效果需求**

1. 點擊Button要滑動中心定位

**使用工具**

```
開版包內
js/modules/tabs_scroll.js
```

**HTML**

```
<div class="c-tabs-scroll tab">
  <div class="tab-horizon-track">
    <ul class="reset">
      <!-- 當前選項 li 加上 current -->
      <li>
        <label class="group-label" for="method-1">
          <input type="radio" id="method-1" name="method"><span></span><strong>項目AAA</strong>
        </label>
      </li>
      <li>
        <label class="group-label" for="method-2">
          <input type="radio" id="method-2" name="method" checked><span></span><strong>項目BBB</strong>
        </label>
      </li>
      <li>
        <label class="group-label" for="method-3">
          <input type="radio" id="method-3" name="method"><span></span><strong>項目CCC</strong>
        </label>
      </li>
      <li>
        <label class="group-label" for="method-4">
          <input type="radio" id="method-4" name="method"><span></span><strong>項目DDD</strong>
        </label>
      </li>
      <li class="current">
        <label class="group-label" for="method-5">
          <input type="radio" id="method-5" name="method"><span></span><strong>項目EEE</strong>
        </label>
      </li>
    </ul>
  </div>
  <div class="tab-prev"></div>
  <div class="tab-next"></div>
</div>
```

**JS**

```
  $(".c-tabs-scroll").tabs_scroll();
  
  var winW = 0;
  var scrollL = 0;
  var scrollTab = $(".c-tabs-scroll");
  var scrollTrack = scrollTab.find('.tab-horizon-track');
  var tabWrapWidth = parseInt(scrollTab.innerWidth());

  $('.c-tabs-scroll input[name=method]').on('click', function() {
    $('.c-tabs-scroll li').removeClass('current');
    $(this).parents('li').addClass('current');
    
    var currentTab = scrollTrack.find('.current');
    var currentLeft = parseInt(currentTab.offset().left - scrollTab.offset().left + scrollL);
    var currentWidth = currentTab.outerWidth(true) + 10;

    scrollL = parseInt(scrollTrack.scrollLeft());
    tabWrapWidth = parseInt(scrollTab.innerWidth());
    currentLeft = parseInt(currentTab.offset().left - scrollTab.offset().left + scrollL);
    currentWidth = currentTab.outerWidth(true) + 10;
    total = currentLeft - tabWrapWidth * 0.5 + currentWidth * 0.5;
    scrollTrack.animate({scrollLeft: total}, 300);
    
  });

```


待測試：Grid 網格自動扣除捲軸寬度

```
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

```