可伸縮的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; 
}