让 SmoothDivScroll 从可滚动区域的中心开始

发布于 2024-12-25 22:45:46 字数 1506 浏览 1 评论 0原文

我试图让 jQuery 插件 SmoothDivScroll (http://www.smoothdivscroll.com/) 开始其所包含内容的中心，因此加载时左右有滚动条。我知道有一个 startAtElementId 选项，但这不允许我从中心开始。

我尝试计算中心点并将其应用到适当的元素，但左侧滚动总是在预期之前停止，而右侧元素浮动在下面。

尝试使用这个 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>

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

干杯，肖恩

原文

I'm trying to get jQuery plugin SmoothDivScroll (http://www.smoothdivscroll.com/) to start at the center of its contained content so there are scrollbars to the left and right on load. I'm aware that there's a startAtElementId option, but this doesn't allow me to start at the center.

I've tried calculating the centerpoint and applying it to the appropriate elements, but the left scroll always stops before it's expected to and the right elements float underneath.

Tried using this Js with no luck:

   $("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 looks like this:

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

Any help or pointers are appreciated.

Cheers,
Shaun

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

秋凉 2025-01-01 22:45:46

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

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

我希望这有帮助:-)

Here is the solution that I suggest :-)

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

I update the fiddle, so you can take a look at this update one:

http://jsfiddle.net/3A9Zy/

I hope this helps :-)

回复收藏 0 原文

分开我的手 2025-01-01 22:45:46

网站中的基本示例 http://www.smoothdivscroll.com/index.html#quickdemo 正在实现该功能。动画从 ID 为“startAtMe”的图像开始

$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", autoScrollDirection: "来回", 自动滚动步长：1，自动滚动间隔：15， startAtElementId: "startAtMe", 可见热点：“总是”});

。您是否尝试为要开始的元素指定 id 并将 startAtElementId: "startAtMe" 传递给 smoothDivScroll 函数？

回复收藏 0 原文

~没有更多了~