Использование плагина ScrollTo для горизонтальной прокрутки - PullRequest
Новая
       4

Использование плагина ScrollTo для горизонтальной прокрутки

1 голос
/ 13 августа 2011

То, чего я пытаюсь добиться, это сделать прокрутку по 4 деления по горизонтали (слева направо) в пределах «пространства окна».Я также включил плагин замедления, и он отлично работает, когда вы нажимаете ссылку «TopLinks», а элементы div перемещаются вверх и вниз ... Однако замедление полностью исчезает при попытке прокрутки слева направо.

Мне стало интересно, связано ли это с моим CSS, но я не уверен.Любая помощь, чтобы получить эту работу будет принята с благодарностью.Вот мой код:

HTML 

<ul id="topLinks">
    <li><a href="#contact">Contact</a></li>
    ...
    <li><a href="#home">Home</a></li>
</ul>
....
<div id="slider">
    <div class="active" id="home">
    //code here
    </div>
    ...
    <div class="active" id="contact">
    //Fourth & last div
    </div>
</div>

CSS 

#slider { 
    position:relative;
    width:530px;
    height:380px;
    margin:60px auto auto 0px;
    overflow:hidden;
}

div.active {
    float:left;
    text-align:justify;
    line-height:30px;
    width:530px;
    height:380px;
    margin: 0px 0px 5px 0px;
    padding:0px;
}

JAVASCRIPT 

$(document).ready(function() {
    $('#topLinks li a').click(function() {
        $('#slider').scrollTo( $(this).attr('href'), 2500, {easing:'swing', axis:'x'});
    });
});

Я также добавлю его в jsfiddleИтак, у вас есть рабочая демоверсия.http://jsfiddle.net/BftMr/

1 Ответ

1 голос
/ 13 августа 2011

Вам нужно обернуть каждый элемент внутри div слайдера другим div, который охватывает ширину каждого из элементов, которые он содержит. (В этом случае я жестко запрограммировал его на 3000px, но вы, вероятно, захотите рассчитать его динамически)

Вот рабочий пример:

http://jsfiddle.net/NdSyB/

Надеюсь, это поможет, если это так, пожалуйста, отметьте это как ответ.

...