**實際操作** 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)); ```