Получение SmoothDivScroll для запуска в центре прокручиваемой области - PullRequest
Новая
       12

Получение SmoothDivScroll для запуска в центре прокручиваемой области

4 голосов
/ 10 января 2012

Я пытаюсь получить плагин 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>

Любая помощь или указатели приветствуются.

Ура, Шон

Ответы [ 2 ]

2 голосов
/ 12 января 2012

Вот решение, которое я предлагаю: -) 

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

Я обновляю скрипку, чтобы вы могли взглянуть на это обновление:

Надеюсь, это поможет: -)

0 голосов
/ 10 января 2012

Базовый образец на сайте http://www.smoothdivscroll.com/index.html#quickdemo имеет реализованную функциональность. Анимация начинается с изображения с идентификатором "startAtMe"

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

. Вы пытались указать идентификатор элемента, с которого хотите начать, и передать startAtElementId: "startAtMe" в функцию smoothDivScroll?

...