How to show horizontal scrollbar if user resizes window created on fullpage.js
I have created a very simple web page that uses the fullPage.js script. It basically works like a sample page provided by the author . Now I would like to put the min-width there on the page so that the user decides to resize the window horizontally and make it small enough - instead of shrinking the div inside - I would just display browser-based horizontal scrollbars. I tried to add either:
body {
min-width: 900px;
width: 100%;
}
or the same thing in another css tag:
.section {
text-align:center;
width: 100%;
min-width: 900px;
}
but none of them worked well. I found this post with the author of the plugin, but I'm not entirely sure if his answer is helpful enough. Can you help me to implement this feature? Thank!
source to share
So, I decided to make a test page myself and read the plugin. Concluding that this would be the path, instead of trying to change the plugin itself:
$(document).ready(function() {
$('#fullpage').fullpage({responsive: 900});
});
It's actually right here as a comment on the GitHub question linked to (blush). The downside to this is that it also triggers a vertical scrollbar.
++++++++++++++++++++++++++++++++++++++++++++++++ +++ +++++++++++++++++++++++
After a few more tests, the dirty approach below from the first draft of the answer also works (oddly only when I link externally to a modified script on the Codepen) - creating a horizontal bar, but keeping the full page height intact (no vertical overflow). But it seems very difficult to get it to run correctly, depending on the order in which the scripts are loaded.
Both html
and body
are overflow: hidden
in CSS, so I would suggest to change it to this:
html, body {
overflow-y: hidden;
}
But it looks like the style is also set via an inline script. This is minimized so it can be difficult to find the exact code there (but not impossible, I only see two likely candidates in fullPage.min.js). The last option would be to override this again with jQuery, but that's quite a bit.
Edit - relevant code in unbounded script meaning:
if(options.autoScrolling && !options.scrollBar){
$htmlBody.css({
'overflow' : 'hidden',
'height' : '100%'
});
Looks the same:
c.autoScrolling&&!c.scrollBar?(w.css({overflow:"hidden",height:"100%"})
So I would try:
c.autoScrolling&&!c.scrollBar?(w.css({"overflow-y":"hidden",height:"100%"})
source to share