JS 移动DIV水平滚动条100px

在JavaScript中，如果你想让一个`<div>`元素在水平方向上有一个固定的滚动条，长度为100像素，你可以通过CSS样式来设置。首先，你需要确保该`div`有一个可以滚动的内容，并且它的宽度大于其容器的宽度。然后，你可以创建一个伪元素来添加滚动条样式。

<style>
    .scrollable-div {
        overflow-x: auto; /* 创建水平滚动条 */
        white-space: nowrap; /* 防止文本换行，使得内容超出部分可见 */
        width: fit-content; /* 自适应内容宽度 */
        scrollbar-width: thin; /* 使用薄的滚动条样式 */
        -ms-scrollbar-width: 6px; /* 对于IE的支持 */
        scrollbar-track-color: transparent; /* 滚动轨道颜色透明，露出背景色 */
        scrollbar-thumb-color: #ccc; /* 滚动条滑块颜色 */
        scrollbar-thumb-border-radius: 4px; /* 滚动条滑块圆角 */
        scrollbar-thumb-background: rgba(0, 0, 0, 0.5); /* 滚动条滑块背景半透明 */
        &::-webkit-scrollbar-thumb { /* Webkit内核（如Chrome/Safari） */
            width: 100px; /* 设置滚动条的固定宽度 */
        }
        &::-webkit-scrollbar-thumb-track { /* 同样针对Webkit内核 */
            background: transparent; /* 轨道透明，以便于看到滑块 */
        }
        /* 可选：给滚动条添加鼠标悬停效果 */
        &::-webkit-scrollbar:hover {
            scrollbar-thumb-color: #999;
        }
    }
</style>

<div class="scrollable-div">
    ...内容...
</div>

上述CSS代码设置了`.scrollable-div`类的滚动条样式，并将滚动条的宽度固定为100像素。请注意，这种方法可能不适用于所有浏览器，尤其是老版本的非WebKit浏览器。对于这类情况，可能需要使用JavaScript库或者一些hack技巧来兼容更多浏览器。