让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在可滚动区域的中心开始

回答

相关问题