Horizontal Scroller, change functionality from pixels to percentages

Fiddle: https://jsfiddle.net/Lq2o5wav/6/

Disclaimer: On a scale of 1 to 10, I am a 2, maybe a 3 on my JS abilities. I can sort of read it but can't manipulate it much. So…

I have a horizontal scrolling area that can also be advanced with a click. The functionality of it is all good, so no problems there. My issue is that when I try to change the layout to be responsive and use percentages instead of pixels, it stops working, because I am assuming it's the pixel overflow that triggers the functionality. I believe the cause lies somewhere in here (where the px is, which also appears in a 2-3 other places in the JS):

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

The way the fiddle is set up now, if you change line 66 in the CSS to a percentage value instead of pixels, the advancing arrows disappear because they are triggered by "determineOverflow" and "data-overflowing" which are reacting to pixel values not % values.

So I would love to keep all the functionality but be able to make this responsive — both the container and the boxes within it.

Thanks in advance!