我正在尝试使jQuery插件SmoothDivScroll(http://www.smoothdivscroll.com/)从其包含的内容的中心开始,以便在加载时在左右具有滚动条。我知道这里有一个startAtElementId选项,但这不允许我从中间开始。

我已经尝试过计算中心点并将其应用于适当的元素,但是向左滚动总是在其预期到来之前停止,而向右元素则在其下方 float 。

在没有运气的情况下尝试使用此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>

任何帮助或指针表示赞赏。

干杯,
肖恩

最佳答案

这是我建议的解决方案:-)

// 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/

  • 我希望这有帮助 :-)

    09-25 15:46