New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added slimScroll default and extending options #612

Closed
wants to merge 1 commit into
from

Conversation

Projects
None yet
4 participants
@Kwaadpepper

Slimscroll options to make fullpage more usable

@Kwaadpepper

This comment has been minimized.

Show comment
Hide comment
@Kwaadpepper

Kwaadpepper Jan 12, 2015

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
});

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

This comment has been minimized.

Show comment
Hide comment
@alvarotrigo

alvarotrigo Jan 12, 2015

Owner

fullPage.js might change to iScroll.js.

Owner

alvarotrigo commented Jan 12, 2015

fullPage.js might change to iScroll.js.

@andremalkine

This comment has been minimized.

Show comment
Hide comment
@andremalkine

andremalkine Jul 23, 2015

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 ...

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 added a commit to rmarscher/fullPage.js that referenced this pull request Sep 9, 2015

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.

rmarscher added a commit to rmarscher/fullPage.js that referenced this pull request Sep 9, 2015

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.

rmarscher added a commit to rmarscher/fullPage.js that referenced this pull request Sep 9, 2015

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.
@Jpsy

This comment has been minimized.

Show comment
Hide comment
@Jpsy

Jpsy Oct 12, 2015

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

Jpsy commented Oct 12, 2015

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

@alvarotrigo

This comment has been minimized.

Show comment
Hide comment
@alvarotrigo

alvarotrigo Mar 23, 2016

Owner

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

Owner

alvarotrigo commented Mar 23, 2016

@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