3

我正在尝试使此滚动效果在网站上起作用。当用户向下滚动时，它会自动转到下一张幻灯片。当用户向上滚动时，它必须向后滑动一张。我onScroll在 Jquery 中使用该函数尝试了很多东西，但它们似乎都不起作用。

我使用以下脚本来检查用户是向上还是向下滚动。

var lastScrollTop = 0;
var check = 1;
var scrollDirection = 'down';

var scrollBottom = $(window).scrollTop() + $(window).height();
    $(window).scroll(function(event) {
        slideHeight = $('.slide').height();
         var st = $(this).scrollTop();
         if (st > lastScrollTop){
             scrollDirection = 'down';
             if (check == 1){
                $('body').scrollTo( {top:'0px', left:'100%'}, 800 );
     check = 0;    
 }

         } else {
             scrollDirection = 'up';
         }
         lastScrollTop = st;


         console.log('ScrollDirection: '+ scrollDirection);

    });

我不会比这更进一步。进行开发的（测试）网站是：http ://bit.ly/RBcffY 如果有人对这种功能有经验，那将非常有帮助。

4

2 回答 2

12

jquery.mousewheel插件可用于捕获鼠标滚轮，即使没有发生滚动（与 相反$.scroll）。这样，您既可以检测到鼠标滚轮被移动，又可以防止滚动发生。然后只需自己执行动画滚动即可。

var scrollingScreen = false;
$("body").mousewheel(function(event, delta) {
    if ( !scrollingScreen ) {
        scrollingScreen = true; // Throttles the call
        var top = $("body").scrollTop() || // Chrome places overflow at body
                  $("html").scrollTop();   // Firefox places it at html
        // Finds slide headers above/below the current scroll top
        var candidates = $(".slide").filter(function() {
            if ( delta < 0 )
                return $(this).offset().top > top + 1;
            else
                return $(this).offset().top < top - 1;
        });
        // If one of more are found, updates top
        if ( candidates.length > 0 ) {
            if ( delta < 0 )
                top = candidates.first().offset().top;
            else if ( delta > 0 )
                top = candidates.last().offset().top;
        }
        // Performs an animated scroll to the right place
        $("html,body").animate({ scrollTop:top }, 800, "easeInOutQuint", function() {
            scrollingScreen = false; // Releases the throttle
        });
    }
    return false; // Prevents default scrolling
});​

jsFiddle的工作示例。这与您显示的引用的行为非常一致，您可以根据需要添加额外的效果 - 通过在其回调函数之前animate或在其回调函数中插入代码，分别在滚动之前或之后执行它们。（Obs.：出于安全原因，运行在 an 中的小提琴iframe无法在某些浏览器中访问，因此它全局存储变量；但是，答案中显示的代码在独立页面中应该可以正常工作）scrollToptop

注意：在参考站点和我的示例中，中间单击和移动鼠标都可以随意滚动。你可能想阻止或不阻止，你的选择。尽管如此，更新后的示例会滚动到特定点，而不是像您在问题中建议的那样添加一些增量 - $('.slide').height()。原因是考虑到不同幻灯片具有不同高度的可能性。此外，准确了解您正在展示的幻灯片可以让您正确设置该位置的哈希值。

另请参阅此相关问题以获取更多信息。

于 2012-10-20T17:00:16.303 回答
0

这是我用于滚动 DIV 的版本。

顺便提一句。最好使用 object.stop()，让它在滚动变化时更平滑。

var vi = $('.box'), vis = $('.box .inbox');

// both events needed for Firefox
vi.on('mousewheel DOMMouseScroll', function(e) {
				
				var eo = e.originalEvent;
				var xy = eo.wheelDelta || -eo.detail; //shortest possible code
				
				var isScrollUp = xy /120 > 0;
        
				if (vi.hasClass('scrolling'+(isScrollUp ? '1' : '0'))) return; // no change
				var top = vi.scrollTop();
				var candidates = vis.filter(function() {
					if ( !isScrollUp )
						return this.offsetTop > top;
					else
						return jQuery(this).offset().top < - 1;
				});
				
				if (candidates.length > 0) {
					if (!isScrollUp)
						top = candidates.first()[0].offsetTop;
					else
						top = candidates.last()[0].offsetTop;
				}
				vi.addClass('scrolling'+(isScrollUp ? '1' : '0')).stop().animate({ scrollTop:top }, 300, "swing", function() {
					vi.removeClass('scrolling1 scrolling0');
				});
				return false; // no default
			});

<!-- begin snippet: js hide: false console: true babel: false -->
BODY{
padding:10px;
}
.box{
 height:300px;
 overflow:scroll;
 position:relative;
}

.inbox{
background:purple;height:300px;font-size:35px;color:#fff;font-weight:bold;
}
.inbox:nth-child(2n){background:lightblue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div class="box">
<div class="inbox">1 -- SCROLLIT</div>
<div class="inbox">2</div>
<div class="inbox">3</div>
<div class="inbox">4</div>
<div class="inbox">5</div>
<div class="inbox">6</div>
</div>

于 2018-01-08T19:17:55.763 回答