CODEWITHSUNDEEP
jquerycssscrollfullpage.js
infiniteloop
infiniteloop

Reputation: 885

fullpage.js one section slider scrollbar autoscroll toTop issue when scrollOverflow:false

As when we disable the scrolloverflow in mobile device to use normal scroll which is more smoother , however the slider will auto scroll to top when you drag the scrollbar down ..

The effect see the snippet below , try viewing in small width window, scroll to anyplace and stop, scrollbar will eventually autoscroll to top by itself.
any option settings or methods can we use to fix this?

$('#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>

link to fullpage.js options: https://github.com/alvarotrigo/fullPage.js/#user-content-options

Upvotes: 1

Views: 4044

Answers (1)

Alvaro
Alvaro

Reputation: 41605

You probably want to use the option fitToSection:false. It is detailed in the docs:

fitToSection: (default true). Determines whether or not to fit sections to the viewport or not. When set to true the currente active section will always fill the whole viewport. Otherwise the user will be free to stop in the middle of a section (when )

Upvotes: 3

Related Questions