I’ve found this working example here: Use Vertical Scrollbar to Horizontal Scroll Content. It’s great except that I’d have to give a random height to #fakecontent. I’d like that when I scroll all the way down, I’d just arrive at the end of the horizontal slider. Not too far, not too close.
I tried to find the required ratio with no luck. with / height etc etc
How is finding the correct height of #fakecontent achievable?
$(window).on('scroll', function() {
$("#realcontent").css("left", -$(window).scrollTop());
});#realcontent {
background-color: #333;
position: fixed;
top: 5px;
left: 0;
width: 2000px;
color: #fff;
height: 100px
}
#fakecontent {
height: 2000px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="realcontent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam a est maiores fugiat nesciunt, at ad. Tempore odio velit ipsam, laborum explicabo repudiandae aliquid nostrum qui dolorem obcaecati, autem expedita!</div>
<div id="fakecontent"></div>