横向网站,滚动转到下一部分

时间:2014-12-14 17:22:30

标签: jquery

有没有机会让这个简洁的脚本在横向滚动的网站上运行?

    //Set each section's height equals to the window height
$('section').height($(window).height());
/*set the class 'active' to the first element 
 this will serve as our indicator*/
$('section').first().addClass('active');

/* handle the mousewheel event together with 
 DOMMouseScroll to work on cross browser */
$(document).on('mousewheel DOMMouseScroll', function (e) {
    e.preventDefault();//prevent the default mousewheel scrolling
    var active = $('section.active');
    //get the delta to determine the mousewheel scrol UP and DOWN
    var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;

    //if the delta value is negative, the user is scrolling down
    if (delta < 0) {
        //mousewheel down handler
        next = active.next();
        //check if the next section exist and animate the anchoring
        if (next.length) {
           /*setTimeout is here to prevent the scrolling animation
            to jump to the topmost or bottom when 
            the user scrolled very fast.*/
            var timer = setTimeout(function () {
                /* animate the scrollTop by passing 
                the elements offset top value */
                $('body, html').animate({
                    scrollTop: next.offset().top
                }, 'slow');

                // move the indicator 'active' class
                next.addClass('active')
                    .siblings().removeClass('active');

                clearTimeout(timer);
            }, 800);
        }

    } else {
        //mousewheel up handler
        /*similar logic to the mousewheel down handler 
        except that we are animate the anchoring 
        to the previous sibling element*/
        prev = active.prev();

        if (prev.length) {
            var timer = setTimeout(function () {
                $('body, html').animate({
                    scrollTop: prev.offset().top
                }, 'slow');

                prev.addClass('active')
                    .siblings().removeClass('active');

                clearTimeout(timer);
            }, 800);
        }

    }
});

我也有一个垂直解决方案的小提琴。 http://jsfiddle.net/NGj7F/

非常感谢任何帮助。

提前致谢, 添

1 个答案:

答案 0 :(得分:0)

您可以使用fullPage.js。您可以创建一个包含多个幻灯片的部分,使其成为水平:

<div class="section">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
    <div class="slide">Slide 4</div>
</div>

使用库而不是您自己的代码的优点:

  • 在网址
  • 中使用锚点(#)
  • 与触控设备兼容
  • 与旧浏览器兼容(&gt; IE7)
  • 提供回调和许多有用的功能
  • 在不同设备上进行了强力测试