8

Is any other alternative for full page scroll?

example of full page scroll

http://jscrollpane.kelvinluck.com/fullpage_scroll.html

step-1 make window width smaller by clicking Restore down button.

step-2 scroll to right

step-3 now, make window width bigger by clicking Maximize button.

now, page is left aligned

jQuery

 $(function()
{
    var win = $(window);

    win.bind(
        'resize',
        function()
        {

                var container = $('#full-page-container');

                container.css(
                    {
                        'width': 1,
                        'height': 1
                    }
                );

                container.css(
                    {
                        'width': win.width(),
                        'height': win.height()
                    }
                );
                isResizing = false;
                container.jScrollPane(
                    {
                        'showArrows': true
                    }
                );

        }
    ).trigger('resize');


    $('body').css('overflow', 'hidden');


    if ($('#full-page-container').width() != win.width()) {
        win.trigger('resize');
    }


});

CSS

html
{
    overflow: auto;
}
#full-page-container
{
    overflow: auto;
}
povilasp
  • 2,386
  • 1
  • 22
  • 36
Array out of bound
  • 1,133
  • 7
  • 24

1 Answers1

5

The thing here is that jScrollPane adds jspPane a left:-***px when you scroll to the right. And never undoes the damage.

If you would add:

$('#full-page-container .jspPane').css('left', 'auto');

In your resize, it will work. Although I suggest you report a bug for jScrollPane guys as well.

povilasp
  • 2,386
  • 1
  • 22
  • 36
  • Is any other alternative for full page scroll? – Array out of bound Jan 01 '13 at 04:30
  • In one project we started using jScrollPane and had a lot of similar problems along the way. So we decided to use it only for small parts, that had to be extra fancy and added a webkit scrollbar style (http://css-tricks.com/custom-scrollbars-in-webkit/) for everything else. Since our majority of users use chrome/safari it was good enough. – povilasp Jan 01 '13 at 14:08
  • I list some alternative JavaScript scroll bar solutions here: http://stackoverflow.com/a/14150577/1085891 – JSuar Jan 04 '13 at 14:45