讓SmoothDivScroll在可滾動區域的中心開始

我試圖讓jQuery插件SmoothDivScroll（http://www.smoothdivscroll.com/）從其包含的內容的中心開始，以便在加載時左右滾動條。我知道有一個startAtElementId選項，但這不允許我從中心開始。讓SmoothDivScroll在可滾動區域的中心開始

我試過計算中心點並將其應用於適當的元素，但左側滾動總是停止，然後纔會出現，並且正確的元素會在下面浮動。

使用這種嘗試JS沒有運氣：

$("div#scroller").smoothDivScroll(); 
    var halfWayDoc = $(document).width()/2; 
    var halfWayScrollArea = $("#scroller .scrollableArea").width() /2; 
    var halfWay = halfWayDoc - halfWayScrollArea; 
    var scrollArea = $("#scroller .scrollableArea").width(); 
    var scrollAreaAdjust = scrollArea + halfWay; 
    $("#scroller .item:first-child").css("margin-left",halfWay); 
    $("#scroller .item:last-child").css("margin-right",halfWay); 
    $("#scroller .scrollableArea").width(scrollAreaAdjust);

HTML看起來像這樣：

<div id="scroller"> 
    <div class="scrollingHotSpotLeft"></div> 
    <div class="scrollingHotSpotRight"></div> 
    <div class="scrollWrapper"> 
     <div class="scrollableArea"> 
      <div class="item"> 
       <img src="assets/images/detail/Erdem-A-W-11-B2-sml.jpg" alt="example"/> 
      </div> 
         ... 
      <div class="item"> 
       <img src="assets/images/detail/Erdem-A-W-11-B2-sml.jpg" alt="example"/> 
      </div> 

     </div> 
    </div> 
</div>

任何幫助或指針讚賞。

乾杯，肖恩

來源

2012-01-09 Shaun Morrison

請你用JsFiddle來模擬問題？這對我們來說更容易幫助你:-) – Qorbani 2012-01-09 21:18:43

@Qorbani我在這裏添加了一個小提琴：http://jsfiddle.net/shaunmorrison/4JeSv/26/ - 請注意第一項具有負邊距（關閉頁面）但第二項不會超出窗口邊界。由於'scrollableArea'寬度儘管有邊距，所以還有下面的項目被錯誤地分流。 – 2012-01-11 20:06:57

在http://www.smoothdivscroll.com/index.html#quickdemo由具有實現的功能的部位的基本樣品。動畫從ID爲「startAtMe」圖像

$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", autoScrollDirection: "backandforth", autoScrollStep: 1, autoScrollInterval: 15, startAtElementId: "startAtMe", visibleHotSpots: "always" });

開始。您是否嘗試了爲要開始的元素指定id並將startAtElementId：「startAtMe」傳遞給smoothDivScroll函數？

來源

2012-01-09 21:53:52

是的，這依賴於指定一個項目開始。我需要計算可滾動區域的精確中點，以便在加載屏幕中心顯示。感謝您的建議。 – 2012-01-11 17:10:52

這裏是我建議:-)

// Element for Scroll 
var scrollElement = $("div#scroller"); 

// Enable Smooth Div Scroll 
scrollElement.smoothDivScroll(); 

// Find out Scrollable area's width 
var halfWidth = $("div#scroller .scrollableArea").width()/2; 

// Force scroller to move to half width :-) 
scrollElement.data("scrollWrapper").scrollLeft(halfWidth);

我更新了小提琴，所以你可以在此更新一個來看看解決方法：

http://jsfiddle.net/3A9Zy/

我希望這有助於:-)

來源

2012-01-11 20:29:52 Qorbani

這似乎很好用！我看到的唯一問題是，如果包裝DIV設置爲100％，那麼左側/第一個圖像總是與窗口的左側齊平，而不管您的視口寬度是多少。例如：http://jsfiddle.net/shaunmorrison/3A9Zy/2/ - 謝謝！ – 2012-01-15 17:47:33

讓SmoothDivScroll在可滾動區域的中心開始

回答

相關問題