Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Issue with full page horizontal scroll

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;
}
like image 878
Array out of bound Avatar asked Dec 29 '12 04:12

Array out of bound


People also ask

How do I fix the horizontal scroll bar?

The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.

How do I fix horizontal scrolling in HTML?

To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.

Why does my website scroll horizontally?

Horizontal scrollbar appear on your site because div “video banner” has width 100 vw which mean 100% of browser width. Now, since your site has vertical scrolling bar it takes a little bit width and div still trying to be full browser width. For fix it, make “video banner” width = 100%.

How do I overflow horizontal scroll?

For horizontal scrollable bar use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line.


1 Answers

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.

like image 115
povilasp Avatar answered Sep 30 '22 17:09

povilasp