Question

我试图通过简单的jQuery或javascript来确定是否可以使用以下方案，而无需使用插件。

以下是基本示例代码：

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.csrf().disable();
    http.authorizeRequests().antMatchers("/login.xhtml").permitAll()
            .antMatchers("/pages/**").access("isAuthenticated()")
            .antMatchers("/run**").access("isAuthenticated()")
            .and()
            .formLogin()
            .loginProcessingUrl("/login")
            .loginPage("/login.xhtml")
            .successHandler(successHandler)
            .failureHandler(failureHandler).defaultSuccessUrl("/pages/dashboard.xhtml")
            .usernameParameter("username").passwordParameter("password")
            .and().sessionManagement().maximumSessions(2)
            .maxSessionsPreventsLogin(true);
}

每个部分都将以宽度和高度填充视口。我想要实现的是，当观看者向下或向上滚动时，无论滚动的长度如何，只需转换到下一部分。我不希望有典型的滚动，只转换到下一个或上一个部分。

我知道我可以非常轻松地使用按钮，并希望将其扩展为滚动。前几天我正在查看一个很好的例子，但我不能为我的生活找到那个页面。

我原本以为可能会使用变量存储查看器当前所在的部分，并根据方向循环，但我不确定这是最好的方法，还是如何开始使用它。

如果我清楚地解释了这个概念，请告诉我。我非常感谢对此的任何想法。

谢谢！

Answer 1

使用Simple JS？不可以。因为这种类型的交互需要视口功能来检查视口中存在哪些元素以及哪些元素部分在视图中，所以最好使用一个考虑所有用户交互，边缘情况和选项的简单插件。为此，社区已经对许多插件进行了彻底的调试。

如果你想在这个概念的某个地方出于知识目的，我已经在下面突出了jsfiddle中的步骤，以帮助你入门：

<强>的jsfiddle http://jsfiddle.net/3nb0mwoe/13/

<强> HTML

<section id="section1">

</section>
<section id="section2">

</section>
<section id="section3">

</section>

<强> CSS

section {
  height: 100%;
}

#section1 {
  background-color: red;
}

#section2 {
  background-color: blue;
}

<强> JS

/* helpers */

// http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
function isElementInViewport (el) {

    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom - 25 <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

function anyOfElementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
  );
}

/* START */
// step 1: get all sections and set viewport height for consistency
var $sections = $('section');
$sections.css('height', window.innerHeight);

// step 2: get current section
var $currSection = $.grep($sections, function($s) {
    return isElementInViewport($s);
});

if($currSection.length > 0) {
    $(window).scroll(function(){
    // step 3. check for any section that is 'partially in viewport'
    var $nextAndCurrSection = $.grep($sections, function($s) {
        return anyOfElementInViewport($s);
    });
    if($nextAndCurrSection.length > 0) {
        // remove currSection from list
      var $nextSection = $($nextAndCurrSection).not($($currSection));
      if($nextSection.length > 0) {
        alert('test');
      }
    }
    });
}

<强>更新根据您的要求，我目前推荐这个插件：alvarotrigo.com/fullPage

限制滚动到目标ID

1 个答案: