CSS+JS 滑動導航

公司小需求，引用插件有些不值當，自己寫一個算了。

(基于bootstrap 導航元件開發，也可自己稍微修改，用在自己的導航上）

#cate_nav_box {
    overflow: hidden; position: relative;
}
.cate_switch_btn {
	transition: all 500ms ease;
    position: absolute; 
    top: 0; 
    bottom: 0; 
    z-index:1;
    background-color: #e0e0e0; 
    color: #7d7d7d;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    cursor: pointer;
}
#cate_left_button {
    left: 0;  
}
#cate_right_button { 
    right: 0;
}
.cate_nav_ul {
    flex-wrap: nowrap;
    width: fit-content;
    transition: all 500ms ease;
}
.cate_nav_ul .nav-item {
    white-space: nowrap;
}
.cate_left_right_button {
    opacity: 0;
    z-index: -1;
}
           

var movement_num = 0;
var nav_item_move_width = 0;
var cate_nav_box,cate_nav_ul_width;

cate_nav_box = $("#cate_nav_box").width();
cate_nav_ul_width = $(".cate_nav_ul").width();

$("#cate_right_button").on("click",function () {
    var nav_item_width = $(".cate_nav_ul li.nav-item").eq(movement_num).width();
    nav_item_move_width = nav_item_move_width + nav_item_width;
    if((nav_item_move_width+cate_nav_box) < cate_nav_ul_width) {
        $(".cate_nav_ul").css('margin-left','-'+nav_item_move_width+'px');
        movement_num++;
    } else {
        $(".cate_nav_ul").css('margin-left','-'+(cate_nav_ul_width-cate_nav_box)+'px');
        $("#cate_right_button").addClass('cate_left_right_button');
    }
    $("#cate_left_button").removeClass('cate_left_right_button');
})
$("#cate_left_button").on("click",function () {
    $(".cate_nav_ul").css('margin-left','0px');
    $("#cate_left_button").addClass('cate_left_right_button');
    $("#cate_right_button").removeClass('cate_left_right_button');
    movement_num = 0;
    nav_item_move_width = 0;
})

           

<div id="cate_nav_box">
	<div id="cate_left_button" class="cate_left_right_button cate_switch_btn">
	    <i class="fa fa-chevron-left"></i>
	</div>
    <div id="cate_right_button" class="cate_switch_btn">
        <i class="fa fa-chevron-right"></i>
    </div>
	<ul class="nav nav-tabs bg-white cate_nav_ul" id="home_tablist" role="tablist">
	    <li class="nav-item">
	        <a class="nav-link active" data-toggle="pill" href="#shouye_tuijian" role="tab">推薦</a>
	    </li>
	    <li class="nav-item">
	        <a class="nav-link" data-toggle="pill" href="#follow" role="tab">關注</a>
	    </li>
		<li class="nav-item">
			<a class="nav-link" data-toggle="pill" href="javascript:;" role="tab" aria-selected="false">iOT安全</a>
		</li>
		.
		.
		.
		.
		.....更多tab
	</ul>
</div>