1.布局代码

<div style="height:2em; line-height:2em; width:100%; position: absolute; display: block;">

                                            <div id="buttons" class="buttons" style="position: absolute; display: inline-block; margin-top: 1em; width: 87%;left:2.5em;height: 7em;overflow-x: scroll;">

                                                <button class="layui-btn layui-btn-sm sendbtn" id="" style="background-color: #93CA70;width: 8.8em;height: 2.2em;line-height: 2.2em;position: absolute;"></button>

                                                <button class="layui-btn layui-btn-sm sendbtn" id="" style="background-color: #93CA70;width: 8.8em;height: 2.2em;line-height: 2.2em;position: absolute;left: 9.5em;"></button>

                                                <button class="layui-btn layui-btn-sm sendbtn" id="" style="background-color: #dc3545;width: 8.8em;height: 2.2em;line-height: 2.2em;position: absolute;top: 3em;margin: 0;"></button>

                                                <button class="layui-btn layui-btn-sm sendbtn" id="" style="background-color: #93CA70;width: 8.8em;height: 2.2em;line-height: 2.2em;position: absolute;left: 20em;"></button>

                                                <button class="layui-btn layui-btn-sm sendbtn" id="" style="background-color: #93CA70;width: 8.8em;height: 2.2em;line-height: 2.2em;position: absolute;left: 30em;"></button>

                                                <button class="layui-btn layui-btn-sm sendbtn" id="" style="background-color: #dc3545;width: 8.8em;height: 2.2em;line-height: 2.2em;position: absolute;left: 20em;top: 3em;"></button>

                                            </div>

                                            <div class="dkxtb" style="display: block;">

                                                <img src="../assets/img/img/dxlf.png" alt="" class="dslf2" id="dslf2">

                                                <img src="../assets/img/img/dxrrg.png" alt="" class="dsrg2" id="dsrg2">

                                            </div>

                                        </div>

2.Js代码

// 按钮列表水平滚动效果实现

let htmlFontSize = document.documentElement.style.fontSize.replace('px',''); // html的font-size的值

var buttons = document.getElementById('buttons');

let _scrollLeft = 0;

var step = htmlFontSize * 18;

$('#dslf2').click(function() {    //点击向左滑动

    if(_scrollLeft >= 3) {

        _scrollLeft -= step

    }

    buttons.scrollTo({

        top: 0,

        left: _scrollLeft,

        behavior: 'smooth'

    });

    //console.log("_scrollLeft: " + _scrollLeft)

});

$('#dsrg2').click(function() {

    if(buttons.scrollLeft+buttons.clientWidth<buttons.scrollWidth-3) {

        _scrollLeft += step;

    }

    buttons.scrollTo({

        top: 0,

        left: _scrollLeft,

        behavior: 'smooth'

    });

});

$('#buttons').scroll(function() {        //监听滚动

    _scrollLeft = buttons.scrollLeft;

});