fullpage.js一节滑块滚动条自动滚动toTop问题时scrollOverflow:false

时间:2015-04-28 08:54:46

标签: jquery css css3 scroll fullpage.js

当我们禁用移动设备中的滚动流以使用更平滑的普通滚动时,滑块会在您向下拖动滚动条时自动滚动到顶部..

效果见下面的代码段, 尝试在小宽度窗口中观看, 滚动到任意位置并停止,滚动条最终将自动滚动到顶部 我们可以使用任何选项设置或方法来解决这个问题吗?

$('#fullpage').fullpage({
     
  paddingTop: '10px',
  verticalCentered: false,
  slidesNavigation: true,
  slidesNavPosition: 'bottom',
  css3: true,
  scrollOverflow: false,
  autoScrolling: false,
  controlArrows: false,
});
.slideOne {
  background-color: #99CCFF;
}
.slideTwo {
  background-color: #FF66FF;
}
.slideThree {
  background-color: #00CC99;
}
/* overriding styling when turning down the slimscroll overflow option */

.fp-section,
.fp-slide,
.fp-tableCell {
  height: auto !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://alvarotrigo.com/fullPage/jquery.fullPage.css">
<script type='text/javascript' src="http://alvarotrigo.com/fullPage/vendors/jquery.easings.min.js"></script>
<script type='text/javascript' src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>

<div id="fullpage">
  <div class="section" id="section0">
    <div class="slide slideOne">first slide long long long long long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long
      longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong
      long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong
      long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong
      long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong
      long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong
      long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong
      long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong
      long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong
      long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong
      long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong
      long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong
      long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long longlong long long text</div>
    <div class="slide slideTwo">second slide in slideshow</div>
    <div class="slide slideThree">third slide in slideshow</div>
  </div>
</div>

链接到fullpage.js选项:https://github.com/alvarotrigo/fullPage.js/#user-content-options

1 个答案:

答案 0 :(得分:3)

您可能想要使用选项fitToSection:false。 详细in the docs

  

fitToSection:(默认为true)。确定是否将节适合视口。设置为true时,currente active部分将始终填充整个视口。否则,用户可以自由地停在某个部分的中间(何时)