如何实现一个前端的横向滚动条，鼠标可以滚动拖动滚动条

vue3代码

const onScroll = (e: any) => {
    const element = document.querySelector('.com-table-item') as HTMLElement
    //下面的实现的是内部元素横向滚动，前提设置好内部元素横向的滚动样式了
    e.preventDefault(); // 防止默认的滚动行为
    // 计算元素应该滚动的距离
    var dx = e.deltaY > 0 ? 100 : -100;
    // 滚动元素
    element.scrollLeft += dx;
}

```@mousewheel="(e: any) => onScroll(e)"