实现 div 横向左右箭头滚动效果

效果如下图所示：

实现：

技术：layui-tab 样式、jquery 的 scrollLeft

• html:

<div class="my-tab">
    <span class="my-tab-left my-tab-icon">
        <i class="fa fa-angle-left" aria-hidden="true"></i>
    </span>
    <span class="my-tab-right my-tab-icon">
        <i class="fa fa-angle-right" aria-hidden="true"></i>
    </span>
    <div class="layui-tab layui-tab-brief" lay-filter="tab"
         style="margin: 0;" lay-allowclose="true">
        <ul class="layui-tab-title scroll">
            <li class="layui-this">1111</li>
            <li>22222</li>
            <li>3333</li>
        </ul>
    </div>
</div>

• css:

.scroll::-webkit-scrollbar
{
  width: 4px;
  height: 5px;
  border-left-width: 0px;
  background-color: #fff;
}
.scroll::-webkit-scrollbar-thumb
{
  border-radius: 3px;
  background-color: #D8D8D8;
}
.scroll::-webkit-scrollbar-track
{
  height: 5px;
  border-radius: 0px;
  background-color: #fff;
}
.my-tab {
    position: relative;
}
.my-tab .layui-tab-title{
    padding-left: 0px;
    overflow-x: scroll;
    overflow-y: hidden;
   height: 42px;
   margin-left: 40px;
   margin-right: 40px;
   background-color: #fff;
}
.my-tab .layui-tab-title::-webkit-scrollbar {
    height: 0px;
}
.my-tab .layui-tab-title::-webkit-scrollbar-track
{
    height: 0px;
}
.my-tab .my-tab-icon {
    position: absolute;
    top: 0px;
    height: 40px;
    width: 40px;
    background-color: #fff;
    font-size: 24px;
    line-height: 40px;
    text-align: center;
    z-index: 2;
}
.my-tab .my-tab-left {
    left: 0px;
}
.my-tab .my-tab-right {
    right: 0px;
}

• js:

var element = '.my-tab'
// 滚动到当前选中的位置
$(element + " .layui-tab-title").animate({
    scrollLeft: $(element + " .layui-tab-title .layui-this").offset().left 
        - $(element + " .layui-tab-title .layui-this").outerWidth(true)
}, 500)
// 点击事件
$(element + ' .layui-tab-title li').unbind();
$(element + ' .layui-tab-title li').bind('click', function (e) {
    if (!$(this).hasClass('layui-this')) {
        var index = $(element + ' .layui-tab-title li').index(this)
        // TODO
    }
})
// 利用 scrollLeft (scrollTop)
$(element + ' .my-tab-left').unbind()
$(element + ' .my-tab-left').bind('click', function () {
    var sl = $(element + " .layui-tab-title").scrollLeft()
    $(element + " .layui-tab-title").scrollLeft(sl - 50)
})
$(element + ' .my-tab-right').unbind()
$(element + ' .my-tab-right').bind('click', function () {
    var sl = $(element + " .layui-tab-title").scrollLeft()
    $(element + " .layui-tab-title").scrollLeft(sl + 50)
})