使用javascript（JQuery Tools Scrollable）中心更改CSS寬度

Question

我正在使用JQuery Tools Scrollable來構建一個完整頁面寬度的可滾動窗體，這樣表單的每個頁面在整個頁面中都一路滾動，由下一個頁面從右側滑入。

我遇到的問題是如何在瀏覽器調整大小和瀏覽器內縮放（Ctrl +/-）的過程中，使每個頁面居中，以使其居中居中。我的代碼是基於：http://flowplayer.org/tools/demos/scrollable/site-navigation.html

我試圖包圍我的代碼在這樣一個div：

<div style="margin-left:-440px; padding-left:50%; width:50%; min-width:880px;"> 

但是，由於這個div本身定位在頁面的中間，滾動頁面唐一直滑到左邊緣 - 它們在距離左邊約30％的div邊緣切出，看起來很糟糕。

我能想到的唯一結論是動態改變利潤率左我在DIV類中定義=「項目」，以確保它總是等於50％ - 440px，但不小於0

我怎樣才能使用JavaScript做到這一點？

Answer 1

是容器div絕對或相對位置？如果它具有特定的寬度，我們假設爲「800px」，然後水平居中很容易，左右兩邊都有自動邊距。 margin: 0 auto。否則它會變得更有趣。

如果你想響應在JavaScript中調整大小，在jquery我做一些像$(window).resize(function() {})（docs here）和處理函數內更新一些CSS值。如果您只想增加寬度但仍有自動邊距，則可以選擇div並更新寬度屬性，例如， $('.mydiv').css('width', '900px');。這會在任何時候調整窗口大小時觸發。