Javascript 相对于元素scrollwidth的JS自定义滚动条拇指大小问题

我为一个组件定制了一个滚动条

我通过

viewportWidth/element.scrollWidth计算其拇指的长度它以%为单位提供值，然后应用于thumb元素

但由于某种原因，在viewportWidth变为一定的值（在我的例子中是622px宽，我不知道这个数字是什么意思，也不知道滚动条会断开，内容是一堆框，每个框的宽度是350px，两边都有1rem（16px）宽的边距，因此每个框需要382像素左右（如果这很重要的话）滚动条变得比它应该的长，为了向左滚动内容，您需要将拇指移出滚动条的长度

这是我的密码：


const-clamp=（val，min，max）=>{
返回Math.min（Math.max（val，min），max）；
}
类ScrollableComponent扩展了React.Component{
state={holding:false，xLocation:0，width:0}；
lastPos=0；
建造师（道具）{
超级（道具）；
this.scrollbarRef=React.createRef（）；
this.scrollContentRef=React.createRef（）；
}
校正=0；
滚动=金额=>{
这是我的国家({
位置：夹具(
this.state.xLocation+金额，
0,
this.getFullWidth（）-this.getAbsoluteThumbWidth（）-this.correction
)
});
};
componentDidMount=（）=>{
document.body.addEventListener（“mousemove”，e=>{
如果（本州控股）{
设delta=e.pageX-this.lastPos；
这个。滚动（增量）；
this.lastPos=e.pageX；
}
});
document.body.addEventListener（“mouseup”，e=>{
this.setState（{holding:false}）；
});
};
getFullWidth=（）=>{
返回此.scrollbarRef.current
？this.scrollbarRef.current.clientWidth
：this.default；
};
contentScrollWidth=（）=>{
if（this.scrollContentRef.current）{
返回this.scrollContentRef.current.scrollWidth；
}
};
contentViewportWidth=（）=>{
if（this.scrollContentRef.current）{
返回this.scrollContentRef.current.clientWidth；
}
};
getRelativeThumbWidth=（）=>{
//log（this.getFullWidth（），this.contentScrollWidth（））；
返回this.getFullWidth（）/this.contentScrollWidth（）；
};
getAbsoluteThumbWidth=（）=>{
返回this.getRelativeThumbWidth（）*this.getFullWidth（）；
};
默认值=100；
render（）{
让calcedWidth=this.getRelativeThumbWidth（）；
让拇指摆位=
this.state.xLocation/
（this.getFullWidth（）-this.getAbsoluteThumbWidth（）-this.correction）；
控制台日志（拇指位置）；
让我们滚动数量=
thumbPosition*（this.contentScrollWidth（）-this.contentViewportWidth（））；
//console.log（拇指位置、滚动量）；
if（this.scrollContentRef.current）{
this.scrollContentRef.current.scrollLeft=scrollAmount；
}
返回(
{
这张卷轴（e.deltaY）；
}}
onTouchMove={e=>{
设newX=e.touchs[0].clientX；
this.scroll（newX-this.lastPos）；
this.lastPos=newX；
}}
>
{this.props.children}
{
this.lastPos=e.clientX；
this.setState（{holding:true}）；
}}
>
);
}
}
类PreviewBox扩展了React.Component{
render（）{
返回(
);
}
}
ReactDOM.render(
,
document.getElementById（“根”）
);
。滚动条{
用户选择：无；
触摸动作：无；
边际上限：0；
高度：25px；
背景：黑色；
显示器：flex；
//填充物：5px；
溢出：隐藏；
}
跨度{
最小宽度：200px；
光标：指针；
背景#b94747；
}
跨度：悬停{
背景:#ff6060；
}
.previewBox{
宽度：350px；
背景：黑色；
过渡：所有0.15秒缓进；
光标：指针；
}
.previewBox:悬停{
过渡：所有0.15秒缓解；
变换：比例（1.025）；
}

如果您将屏幕变宽，您将看到滚动条工作正常，如果滚动条不够宽，其拇指将必须离开视口才能工作

const-clamp=（val，min，max）=>{
返回Math.min（Math.max（val，min），max）；
}
类ScrollableComponent扩展了React.Component{
state={holding:false，xLocation:0，width:0}；
lastPos=0；
建造师（道具）{
超级（道具）；
this.scrollbarRef=React.createRef（）；
this.scrollContentRef=React.createRef（）；
}
校正=0；
滚动=金额=>{
这是我的国家({
位置：夹具(
this.state.xLocation+金额，
0,
this.getFullWidth（）-this.getAbsoluteThumbWidth（）-this.correction
)
});
};
componentDidMount=（）=>{
document.body.addEventListener（“mousemove”，e=>{
如果（本州控股）{
设delta=e.pageX-this.lastPos；
这个。滚动（增量）；
this.lastPos=e.pageX；
}
});
document.body.addEventListener（“mouseup”，e=>{
this.setState（{holding:false}）；
});
};
getFullWidth=（）=>{
返回此.scrollbarRef.current
？this.scrollbarRef.current.clientWidth
：this.default；
};
contentScrollWidth=（）=>{
if（this.scrollContentRef.current）{
返回this.scrollContentRef.current.scrollWidth；
}
};
contentViewportWidth=（）=>{
if（this.scrollContentRef.current）{
返回this.scrollContentRef.current.clientWidth；
}
};
getRelativeThumbWidth=（）=>{
//log（this.getFullWidth（），this.contentScrollWidth（））；
返回this.getFullWidth（）/this.contentScrollWidth（）；
};
getAbsoluteThumbWidth=（）=>{
返回this.getRelativeThumbWidth（）*this.getFullWidth（）；
};
默认值=100；
render（）{