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;
});
