JS 前端表格顶部增加横向滚动条，键盘上下左右键控制滚动条

这是普通表格的底部滚动条，这个表格是没有设置分页的，如果表格内容过多则需要拉到页面底部才可以进行横向的滚动，比较的麻烦。

功能目标： 表格顶部增加滚动条，可用键盘 ↑ ↓ ← → 进行滚动。

HTML

	<div class="cxd-Table-contentWrap">
	  <div class="cxd-Table-content">
	    <table class="cxd-Table-table">
	      <thead></thead>
	      <tbody></tbody>
	    </table>
	  </div>
	</div>

CSS

.top-scroll {
    width: 100%;
    overflow-x: auto;
}

.top-scroll-content {
    /* 高度不设置的话滚动条出不来 */
    /* height: 1px; */
}
.top-scroll::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}
.top-scroll::-webkit-scrollbar-thumb {
    display: none;
}

.top-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(147, 147, 147, 0.2);
    opacity: 0.2;
    background: #888888;
    display: block;
}

js代码

			 // 不需要显示表格顶部滚动条只要把 top-scroll-content 的高度设置为 0px
			let scrollElementHTML =
                `<div class="top-scroll">
                    <div class="top-scroll-content" style="width: 0;height: 1px;"></div>
                </div>  
                `

            // 获取目标父元素
            let tableParentElement = document.querySelectorAll('.cxd-Table-contentWrap')

            // 使用 insertAdjacentHTML 在目标元素的前面插入新元素
            tableParentElement.insertAdjacentHTML('beforebegin', scrollElementHTML);

            //表格底部滚动条
            let tableBottomScroll = document.querySelectorAll('.cxd-Table-content')
            //表格顶部滚动条
            let topScroll = document.querySelector('.top-scroll')
            let tableWidth = document.querySelector('.top-scroll-content')

            //获取初始表格宽度 -> 同步 顶部和底部滚动条
            tableWidth.style.width = tableBottomScroll.scrollWidth + 'px'

            //监听顶部滚动条 ->同步底部的
            topScroll.addEventListener('scroll', () => {
                let scrollLeft = topScroll.scrollLeft
                tableBottomScroll.scrollTo(scrollLeft, 0)
            })

            //监听底部滚动条 ->同步顶部的
            tableBottomScroll.addEventListener('scroll', () => {
                let scrollLeft = tableBottomScroll.scrollLeft
                topScroll.scrollTo(scrollLeft, 0)
            })

            //监听键盘上下左右键
            document.addEventListener('keydown',(e)=>{
                let scrollLeft = tableBottomScroll.scrollLeft
                if(e.key == 'ArrowLeft'){
                    tableBottomScroll.scrollTo(scrollLeft -= 20, 0)
                    topScroll.scrollTo(scrollLeft -= 20, 0)
                }else if(e.key == 'ArrowRight'){
                    tableBottomScroll.scrollTo(scrollLeft += 20, 0)
                    topScroll.scrollTo(scrollLeft += 20, 0)
                }
            })

效果

参考文章
el-table 横向滚动条固定在可视窗口底部