滚动上的垂直滑块

我在寻找一个应该在滚动上垂直改变滑块的滑块。滚动上的垂直滑块

这是refrence网址：https://www.uber.com/的移动滑块

请帮助我，我试图做到这一点since7,8小时。这是我正在尝试使用的代码。

$(document).ready(function() { 

// var totalheight=$(window).height(); 
// $('.carosel-section').css('height',totalheight); 

//Set each section's height equals to the window height 
//$('.moveable').height($(window).height()); 

$('.moveable').first().addClass('active'); 

$('.carousel-wrap').on('mousewheel DOMMouseScroll', function (e) { 
    e.preventDefault();//prevent the default mousewheel scrolling 
    var active = $('.moveable.active'); 
    var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1; 

    if (delta < 0) { 
     //mousewheel down handler 
     next = active.next(); 
     if (next.length) { 
      var timer = setTimeout(function() { 
       $('body, html').animate({ 
        scrollTop: next.offset().top 
       }, 'fast'); 

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

       clearTimeout(timer); 
      }, 100); 
     } 

    } else { 
     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); 
     } 

    } 
}); 

});

来源

2016-04-07 shalini

你可以分享可执行的演示/片段或[JSFiddle]（https://jsfiddle.net/）吗？我们如何执行提供的代码？ – Rayon

其实我只是试了一下代码。它不起作用。我添加了内联滚动到幻灯片，然后尝试实现部分内的一个页面滚动效果。 – shalini

你想让整个页面能够垂直滑动吗？或者仅仅是Uber的部分？ – Roy

-1

您是否试过在Parallax.js？我认为这就是你要找的。主页上的示例应该为您提供快速入门！

来源

2016-04-07 11:47:11 LoreV

这有评论...！ – Rayon

@Rayon Dabre：评论应该只用于建议修改问题。我是问题陈述的实际答案：“我正在寻找一个滑块，它应该在滚动上垂直更改滑块” – LoreV

是吗？ Op有一个代码段，其中_is不工作_你的答案如何解决目的。如果OP正在寻找类似的东西，那么它必须在_下面关闭，“要求我们推荐或找到书籍，工具，软件库，教程或其他非本地资源的问题与Stack Overflow无关，因为它们倾向于吸引舆论的答案“ – Rayon

滚动上的垂直滑块

回答

相关问题