水平滚动器，将功能从像素更改为百分比

Question

小提琴：https://jsfiddle.net/Lq2o5wav/6/

免责声明：在 1 到 10 的范围内，我的 JS 能力是 2，也许是 3。我可以阅读它，但不能操纵它。所以。。。

我有一个水平滚动区域，也可以通过单击来前进。它的功能都很好，所以没有问题。我的问题是，当我尝试将布局更改为响应式并使用百分比而不是像素时，它会停止工作，因为我假设是像素溢出触发了该功能。我相信原因就在这里的某个地方(px所在的地方，它也出现在 JS 的 2-3 个其他地方(：

if (availableScrollLeft < SETTINGS.navBarTravelDistance * 2) {
pnProductNavContents.style.transform = "translateX(" + availableScrollLeft + "px)";
}

现在设置小提琴的方式是，如果将 CSS 中的第 66 行更改为百分比值而不是像素，前进箭头将消失，因为它们是由"确定溢出"和"数据溢出"触发的，它们对像素值而不是 % 值做出反应。

因此，我很想保留所有功能，但能够使其响应 - 容器和其中的盒子。

提前感谢！

Answer 1

如果可能的话，最好将大小调整的职责放在一个元素上。在这种情况下，nav的父级确定nav的大小。然后利用flex的奇妙能力来填补它的子空间。

适用于您拥有的...

nav {
...
width: auto; // or just remove the existing width rule.
display: flex;
...
}
.pn-ProductNav_Link {
...
flex: 1;
...
}