Scalable div larger than window - html

Question

Concept
I'm trying to get a list larger than the window, which will move depending on mouse position. The goal is to allow the user to see all list entries, whatever their amount.
Below is a simple image to illustrate the concept :
Black frame is the window
Black arrow is the mouse position
Red line is the list
Problem
Currently, I can make this work only if I set the list width. I would like to not set this width.
Here's the code:
$(document).ready(function() {
var widthPage = $('.strip').width();
var widthStrip = $('.strip ul').width();
$('.strip').on('mousemove', function(event) {
var offset = $(this).offset();
var relX = event.pageX - offset.left;
var left = relX * (widthStrip - widthPage) / widthPage;
$(this).find('ul').css('left', '-'+left+'px');
});
});
/* Positioning */
.strip {
position:relative;
overflow: hidden;
}
.strip ul {
position: absolute;
top: 0; left: 0;
width: 1750px;
}
.strip li {
display: block;
float: left;
}
/* Style */
body {
padding: 0;
margin: 0;
}
.strip {
height: 30px;
margin-top: 50px;
}
.strip ul {
height: 30px;
padding: 0;
margin: 0;
}
.strip li {
list-style: none;
border: 1px solid #EBEBEB;
margin-right: -1px;
padding: 0 5px;
line-height: 28px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="strip">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Sit</li>
<li>Amet</li>
<li>Consectetur</li>
<li>Adipisicing</li>
<li>Elit</li>
<li>Sed</li>
<li>Do</li>
<li>Eiusmod</li>
<li>Tempor</li>
<li>Incididunt</li>
<li>Ut</li>
<li>Labore</li>
<li>Et</li>
<li>Dolore</li>
<li>Magna</li>
<li>Aliqua</li>
<li>Ut</li>
<li>Enim</li>
<li>Ad</li>
<li>Minim</li>
<li>Veniam</li>
<li>Quis</li>
<li>Nostrud</li>
<li>Exercitation</li>
<li>Ullamco</li>
<li>Laboris</li>
<li>Nisi</li>
<li>Ut</li>
<li>Aliquip</li>
<li>Ex</li>
<li>Ea</li>
<li>Commodo</li>
<li>Consequat</li>
</ul>
</div>

Answer 1

The issue here is that to force the floated elements to expand beyond the page's width, you need to force their container to have a width sufficient to hold them all. I propose using display: inline-block instead, as they will continue so long as their container specifies white-space: nowrap.
.strip {
position:relative;
white-space: nowrap;
overflow: hidden;
}
.strip ul {
position: absolute;
top: 0; left: 0;
font-size: 0; /* prevent html whitespace from displaying */
}
.strip li {
display: inline-block;
font-size: 16px; /* reset font size so the elements appear */
}
After setting these styles, the list will scroll correctly without an explicit width set.

Answer 2

One way to do it would be to make .strip very large and change widthPage to a grandparent's width who's size is equivalent to the original parent's, in this case var widthPage = window.innerWidth;
Demo Here
Changed CSS
body { overflow-x: hidden; }
.strip {
position:relative;
overflow: hidden;
width:10000px; /* Arbitrary large value */
}
.strip ul {
position: absolute;
top: 0; left: 0;
width: auto;
}