Javascript 无法设置固定宽度和中心的自定义滚动条

我正在制作一种旋转木马，里面的物品水平排列

每个子元素（大约有十几个）都应该延伸父元素宽度的三分之一。三个项目在任何时候都应可见

我使用了bootstrap4、一些定制的CSS和

var ps=new PerfectScrollbar（'#carousel'）
html，
身体{
填充：0；
保证金：0；
身高：100%；
}
.页面包装器{
最小高度：100%；
}
.英雄{
高度：100vh；
背景:#212121 ;；
证明内容：中心；
对齐项目：居中；
}
#旋转木马{
显示器：flex；
列表样式类型：无；
位置：相对位置；
保证金：0；
填充：0；
对正内容：左；
对齐项目：居中；
}
#旋转木马李{
填充：0 70px 0；
}
#旋转木马{
文字装饰：无；
颜色：#fff；
}
#旋转木马{
显示：块；
宽度：100%；
}
#旋转木马.说明{
填充：20px 20px 0 20px；
}
#旋转木马h2{
字体大小：20px；
线高：1；
保证金：0；
填充：0；
}
#旋转木马{
字体大小：10px；
填充：0；
保证金：5px0；
}
#旋转传送带ps_uu轨道-x{
背景：#5c；
高度：3倍；
保证金：0自动；
}
#旋转木马{
高度：3倍；
边缘底部：-2px；
边界半径：0；
背景：#fff；
}











您可以将
maxScrollbarLength
传递给
PerfectScrollbar
实例，并将其值设置为所需的拇指宽度。
像这样：

var ps = new PerfectScrollbar('#carousel', {
  // set this for 300px width thumb
  maxScrollbarLength: 300
});

看一下这个演示：
我在添加中获得了想要的效果

.ps__rail-x {margin: 0 35%;}

及


var ps=new PerfectScrollbar（“#carousel”{
最大滚动条长度：150
});
html，
身体{
填充：0；
保证金：0；
身高：100%；
}
.页面包装器{
最小高度：100%；
}
.英雄{
高度：100vh；
背景:#212121 ;；
证明内容：中心；
对齐项目：居中；
}
#旋转木马{
显示器：flex；
列表样式类型：无；
位置：相对位置；
保证金：0；
填充：0；
对正内容：左；
对齐项目：居中；
}
#旋转木马李{
填充：0 70px 0；
}
#旋转木马{
文字装饰：无；
颜色：#fff；
}
#旋转木马{
显示：块；
宽度：100%；
}
#旋转木马.说明{
填充：20px 20px 0 20px；
}
#旋转木马h2{
字体大小：20px；
线高：1；
保证金：0；
填充：0；
}
#旋转木马{
字体大小：10px；
填充：0；
保证金：5px0；
}
#旋转传送带ps_uu轨道-x{
背景：#5c；
高度：3倍；
利润率：0.35%；
}
#旋转木马{
高度：3倍；
边缘底部：-2px；
边界半径：0；
背景：#fff；
}











您可以将
最大宽度设置为300px
，因为js一直将宽度更改为1280px。当前的滚动条插件看起来不可能。可能使用其他类似或smthI的东西。我希望灰色部分（带类的div
ps\uu rail-x
）的宽度为300px，居中。
var ps = new PerfectScrollbar('#carousel', {
  maxScrollbarLength: 150
});