可扩展div大于窗口

Question

概念

我正在尝试获取一个大于窗口的列表，该窗口将根据鼠标位置移动。目标是允许用户查看所有列表条目，无论其数量多少。

下面是一个简单的图片来说明这个概念：

• 黑框是窗口
• 黑色箭头是鼠标位置
• 红线是列表

问题

目前，只有设置了列表宽度，才能使这个工作正常。我想不设置此宽度。

以下是代码：

$(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

这里的问题是，为了强制浮动元素扩展超出页面的宽度，您需要强制其容器具有足以容纳所有容器的宽度。我建议改为使用display: inline-block，因为只要容器指定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 */
}

设置这些样式后，the list will scroll correctly without an explicit width set。

Answer 2

这样做的一种方法是使.strip非常大，并将widthPage更改为祖父母的宽度，其大小等于原始父级，在这种情况下var widthPage = window.innerWidth;

Demo Here

更改了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;
}