How to scroll with large pages with jQuery onepage-scroll plugin?


Tags: javascript,jquery,html,css,scroll

Problem :

I found this great plugin called onepage-scroll, which meets my needs, except for one thing. Some of my pages (<section> tags) can be larger than one screen. How can I customize it so that it only scrolls when it finished the "regular" scrolling, inside the section ?

I tried to change the css rule :

.onepage-wrapper {
  width: 100%;
  /*height: 100%;*/
  height:200%;
  display: block;
  position: relative;
  padding: 0;
  -webkit-transform-style: preserve-3d;
}

but it still scrolls to the next page, with one scroll movement.

I'm trying to make it scroll to the bottom of the section (height > 100%), then scroll to the next page.

Any help will be appreciated. Thanks !



Solution :

You may want to use fullPage.js instead. There's an option called scrollOverflow which allow you to have scrolling inside section as you can see in this example


    CSS Howto..

    How to Centralize a Float on the Screen (such horizontally as vertically) Using CSS

    How to fix angular-strap css

    How to fit label “css width”

    How to debug HTML5/CSS for background video in RoR app

    How to make a child div alone responsive using css?

    How to style HTML select option hover and selected option effects

    How to achieve CSS transitions with delay timers but without any easing function?

    Determining if shown dates in a table are before today's date using jQuery

    How to make content div full height when using padding on wrapper?

    css show separator icon for icons

    How to disable [marquee] tag with CSS? Is this possible?

    How to enlarge footer on mobile only?

    How to make a visible rectangular frame in CSS to contain some sections of my view?

    How to hide expand/collapse icon in vaadin treetable?

    How to highlight the menu item for the sort type of data on the page?

    How do I make my HTML5 nav li tab stay active on click with CSS3?

    how to use javascript if in IE but use css for all other browsers?

    Showing Text When Hovering Over an Image Link

    how to make a div toggle background-position “onclick” while keeping hover

    How can I give a child element of one parent a higher z-index than another parent?

    How to turn off carousel when resized?

    How to fade-in and fade-out background-image with CSS transition?

    How to get the current year using css?

    php- How to strip CSS in the text

    How can I stop an CSS animation from interfering with a CSS transform transition?

    How to structure elements in jQuery Mobile

    How to fix image loading time with my image slider?

    CSS - how to make responsive images

    How to use CSS to create a particular stylized, multi-lined text box?

    How to prevent javascript and css messing up?