4

概念

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

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

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

在此处输入图像描述

问题

目前，只有设置列表宽度才能完成这项工作。我不想设置这个宽度。

这是代码：

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

4

2 回答 2

4

这里的问题是，要强制浮动元素扩展超出页面的宽度，您需要强制它们的容器具有足以容纳它们的宽度。我建议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 */
}

设置这些样式后，列表将正确滚动而无需显式设置宽度。

于 2013-10-16T21:56:39.653 回答
1

一种方法是做得.strip非常大并更改widthPage为祖父母的宽度，在这种情况下，祖父母的尺寸与原始父母的尺寸相同var widthPage = window.innerWidth;

在这里演示

更改了 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;
}
于 2013-10-16T21:59:48.640 回答