javascript - How to show horizontal scrollbar if user resizes the window created on fullpage.js -
i created simple webpage uses fullpage.js script. works sample page provided author. now, put there min-width on page, when user decides resize window horizontally , make small enough - instead of shrinking divs inside - display browser-native horizontal scrollbars. tried add either:
body { min-width: 900px; width: 100%; }
or same in other css tag:
.section { text-align:center; width: 100%; min-width: 900px; }
but none of worked well. found this communication author of plugin, i'm not sure if response helpful enough. can me implementation of feature? thanks!
so decided make test page myself , read on plugin. coming conclusion way go instead of trying alter plugin :
$(document).ready(function() { $('#fullpage').fullpage({responsive: 900}); });
it's right here comment on github question linked (blush). disadvantage of triggers vertical scrollbar well.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
after more testing, 'dirty' approach below first draft of answer appears working (strangely when externally linked modified script on codepen) - creating horizontal bar keeping full page height intact (with no vertical overflow). seems tricky trigger correctly, depending on order in scripts loaded.
both html
, body
have overflow: hidden
in css, suggest changing :
html, body { overflow-y: hidden; }
but looks style also set through inline script. minified may tricky find exact code there (but not impossible, see 2 candidates in fullpage.min.js). last option override again jquery that's bit messy altogether.
edit - relevant code in non-minified script :
if(options.autoscrolling && !options.scrollbar){ $htmlbody.css({ 'overflow' : 'hidden', 'height' : '100%' });
looks same :
c.autoscrolling&&!c.scrollbar?(w.css({overflow:"hidden",height:"100%"})
so try :
c.autoscrolling&&!c.scrollbar?(w.css({"overflow-y":"hidden",height:"100%"})
Comments
Post a Comment