使用JQuery在水平滾動頁面內水平居中內容

我有一個包含3個內容區域的頁面（div爲「section」類）。使用JQuery在水平滾動頁面內水平居中內容

http://refreshperspective.com/CLIENTS/unboxed/products.html

我使用jQuery水平滾動這三個div的。我遇到的問題是在調整窗口大小時將div中的內容保持在中心位置。我一直在使用下面的代碼：

var wind = $(window).width(); 
$(".section").width(wind); 
$(window).resize(function(){ 
var windRe = $(window).width(); 
$(".section").width(windRe); 
});

這工作完全在加載的第一個div（主屏幕），但是當你向右滾動到其他三個的div失敗。

當這些被調整大小時，div移動離開中心（當窗口向右調整大一些時，向右移動，反之亦然）。關於如何讓其他兩個內容區域保持其居中位置（應該與位於絕對位置的底部的導航保持內聯）的任何想法都將非常棒。

來源

2010-08-24 RyanL

問題是，在你的CSS中，你已經定義了使用簡單邊距的部分。使用旨在處理窗口大小更改的elastic CSS layout會更好。看看使用

margin:0 auto;

在你的包裝CSS類，這應該會更容易。您可能還想考慮將三部分保存在一個單獨的div中，然後在一個大塊中滾動。

漂亮的網站，順便說一句！

來源

2010-08-25 00:47:28 Trafalmadorian

Trafalmadorian，感謝您的意見，不幸像您說的那樣，我認爲這個錯誤還在於網站的定位和利潤。我無法讓其他兩個內容區域的行爲像第一個那樣！感謝您的幫助，如果我今晚無法正常工作，我想我可能會將所有內容放到內容滑塊中，而不是完整的水平滾動條。可能是EasySlider1.7或其他類似的東西。再次感謝，當我有能力爲您的答案投票（目前缺乏聲望），我會！ – RyanL 2010-08-25 18:17:54

酷酷，我真的很感激它。絕對考慮EasySlider，這樣你就不必重新發明輪子:) – Trafalmadorian 2010-08-25 19:57:52

我最終移動到一個垂直滑塊來消除這個問題。 http://refreshperspective.com/CLIENTS/unboxed/products-test2.html 我認爲，當窗口被調整大小時，底層問題實際上來自於不重置到新中心的滾動。儘管感謝您的幫助！ – RyanL 2010-08-29 19:26:09

使用JQuery在水平滾動頁面內水平居中內容

回答

相關問題