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;
}
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.
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.
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%.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With