Added slimScroll default and extending options #612

Closed
wants to merge 1 commit into
from

Projects

None yet

4 participants

@Kwaadpepper

Slimscroll options to make fullpage more usable

@Kwaadpepper

No globals options as for fullPage.js, but

Please take a look at http://rocha.la/jQuery-slimScroll,
Slim scroll doesn't have global options, it runs in multiple instances.

You could try to add some prop to window and encapsulate fullpage.js
or you could just store a slimscroll object (params) in windows,

something like

window.fullpageSlimScrollParams = slimScroll: {
    color: '#ffcc00',
    railVisible: true,
    railColor: '#222',
    railOpacity: 0.3,
    wheelStep: 10,
    disableFadeOut: false,
}

and give it to fullpage like

// change something in window.fullpageSlimScrollParams
var SC = window.fullpageSlimScrollParams;
SC['color'] = 'red';
$('#fullpage').fullpage({
        verticalCentered: true,
        resize : true,
        sectionsColor : ['#ccc', '#fff'],
        anchors:['firstSlide', 'secondSlide'],
        scrollingSpeed: 700,
        easing: 'easeInQuart',
        menu: false,
        navigation: false,
        navigationPosition: 'right',
        navigationTooltips: ['firstSlide', 'secondSlide'],
        slidesNavigation: true,
        slidesNavPosition: 'bottom',
        loopBottom: false,
        loopTop: false,
        loopHorizontal: true,
        autoScrolling: true,
        scrollOverflow: false,
        css3: false,
        paddingTop: '3em',
        paddingBottom: '10px',
        normalScrollElements: '#element1, .element2',
        normalScrollElementTouchThreshold: 5,
        keyboardScrolling: true,
        touchSensitivity: 15,
        continuousVertical: false,
        animateAnchor: true,
        sectionSelector: '.section',
        slideSelector: '.slide',
        // See more options at http://rocha.la/jQuery-slimScroll @author Piotr Rochala

        slimScroll: SC,

        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
        onSlideLeave: function(anchorLink, index, slideIndex, direction){}
    });

here are the full settings offslimScroll :

$(selector).slimScroll({
    width: '300px',
    height: '500px',
    size: '10px',
    position: 'left',
    color: '#ffcc00',
    alwaysVisible: true,
    distance: '20px',
    start: $('#child_image_element'),
    railVisible: true,
    railColor: '#222',
    railOpacity: 0.3,
    wheelStep: 10,
    allowPageScroll: false,
    disableFadeOut: false
});
@alvarotrigo
Owner

fullPage.js might change to iScroll.js.

@andremalkine

I know this is a hack, but I worked around it like so:

var oldSlimScroll = $.fn.slimScroll;
$.fn.slimScroll = function( options ){
  options.wheelStep = 4;
  return oldSlimScroll.apply(this, [options] );
};
...
// Init fullpage.js ...
@rmarscher rmarscher added a commit to rmarscher/fullPage.js that referenced this pull request Sep 9, 2015
@rmarscher rmarscher Moves scrollOverflow code to separate handler object
This update adds a new option called 'scrollOverflowHandler'
which consolidates all code related to scrollOverflow and
allows it to be swapped out with different functionality.

By default, it will use the existing jquery.slimScroll handling
of scroll overflow.

This should make it easier for users to either customize the
slimScroll handling or replace it with other code just as wrapping
content in a div with `overflow: scroll` or utilizing iscroll.js
as requested in issues #506, #612 and others.
f230294
@rmarscher rmarscher added a commit to rmarscher/fullPage.js that referenced this pull request Sep 9, 2015
@rmarscher rmarscher Moves scrollOverflow code to separate handler object
This update adds a new option called 'scrollOverflowHandler'
which consolidates all code related to scrollOverflow and
allows it to be swapped out with different functionality.

By default, it will use the existing jquery.slimScroll handling
of scroll overflow.

This should make it easier for users to either customize the
slimScroll handling or replace it with other code just as wrapping
content in a div with `overflow: scroll` or utilizing iscroll.js
as requested in issues #506, #612 and others.
3634adb
@rmarscher rmarscher added a commit to rmarscher/fullPage.js that referenced this pull request Sep 9, 2015
@rmarscher rmarscher Moves scrollOverflow code to separate handler object
This update adds a new option called 'scrollOverflowHandler'
which consolidates all code related to scrollOverflow and
allows it to be swapped out with different functionality.

By default, it will use the existing jquery.slimScroll handling
of scroll overflow.

This should make it easier for users to either customize the
slimScroll handling or replace it with other code just as wrapping
content in a div with `overflow: scroll` or utilizing iscroll.js
as requested in issues #506, #612 and others.
301f66a
@Jpsy
Jpsy commented Oct 12, 2015

For the time being the "hack" of @andremalkine is just great!

@alvarotrigo
Owner

@Kwaadpepper, would you consider updating your fullpage.js version so I can merge your PR ?
Otherwise I'll just do it myself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment