Jquery自动滚动展厅

15 浏览
0 Comments

Jquery自动滚动展厅

我试图构建一个类似于这个的网站。为了做到这一点，我编写了以下代码：

var $window = $(window);
var lastScrollTop = 0;
var shown_elements = 0;
var next_element = 0;
$window.on('scroll', scroll_to_next);
$window.trigger('scroll');
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
var scroll = $(window).scrollTop();
function scroll_to_next() {
  shown_elements = Math.ceil($(window).scrollTop() / window_height);
  next_element = shown_elements * window_height;
  if (lastScrollTop < $(window).scrollTop() && lastScrollTop != 0) {
    //$window.scrollTop(next_element);
    $('html, body').animate({
      scrollTop: next_element
    }, 'slow');
    //alert(next_element);
  }
  lastScrollTop = $(window).scrollTop();
}

这是HTML代码：

    
    
    
Hello

    
description

    
    
Hello

    
description

    
    
    
Hello

    
description

这段代码第一次运行正常，并自动滚动到第二个“展示间”。但是当我尝试第二次滚动时，页面无法滚动。

我的代码有什么问题吗？

0

3 答案

0 Comments

问题的原因：代码中的自动滚动功能出现了问题。

解决方法：检查代码中的逻辑错误并进行修复。

0
0 Comments

原因：

问题出现在代码的这一行：if (lastScrollTop < $(window).scrollTop() && lastScrollTop != 0)。

具体来说，问题出现在lastScrollTop != 0这一部分。

当代码第一次执行时，变量"lastScrollTop"被设置为0，所以if语句判断为false，不会滚动，但是"shown_elements"和"next_element"这两个变量被改变。

当第二次运行代码时，"lastScrollTop"已经被改变，但是由于其他变量也已经被改变，导致代码无法按预期工作。

解决方法：

解决方法可能是改变if语句中的条件，将"lastScrollTop != 0"修改。

0
0 Comments

Jquery自动滚动展厅的问题是由于没有捕捉到由$(window)提供的滚动事件而导致的。解决方法是将函数scroll_to_next()添加到$(window).scroll()中。下面是一个示例链接，可以参考其中的代码：Example

0