I have a single web page that has an annoying visible scroll bar. I want to get rid of the scroll bar when the website is at full screen. I've tried using overflow-y:hidden; but the problem with that is when I try to resize the window the navbar pushes all the content down the web page and overflow-y:hidden; makes it impossible to scroll to view the content.
I'm not sure if it's something wrong with my background because I'm not using an image, just a gradient, and I don't want my navbar to overlay the website.
Related
I've noticed on sites like The New Yorker that when on mobile if you scroll to the very top and continue to scroll upwards the navbar stays firmly attached to the top of the window. On my site, the navbar stays connected to the rest of the content when I scroll up and continue past the body of the page. How would I go about emulating what The New Yorker does. I have looked at their page's css but can't seem to tell what gives that functionality. Any help would be appreciated.
setting the position:fixed and top:0 to the navbar should work, although after that you will have to determine the height occupied by the navbar and give your body content padding set to that height to have a neat display. Please check this link : Why the paragraph is hidden behind navbar however navbar comes first in html source?
I tried to understand how css env works but I cannot... I have problem with my sidebar and chrome search bar that hides after page scrolls down a bit. Otherwise using 100vh for my sidebar with scroll, some content stays hidden under the page so user needs to scroll page to scroll sidebar to the bottom of it.
I tried using these but I do not understand them either way:
height: env(safe-area-inset-top, calc(100vh - 56px));
And as I found somewhere, 56 is for phone size, but where is tablet size bar etc?
Is there actual solution for this? Without using media for displays and setting different heights?
is any chance to have a scroll bar element that I can move where I want on the page but to link with my scroll box? I have created my scroll box ready but I need a scroll bar that should to be moved on other place on page.
Try jQuery Scrollbar - look at Advanced Scrollbars Demo page - External scrollbar.
If you want to use native browser scrollbar (or do not like custom scrollbars), you will have to use two containers - one with your scrollable content and the second one - with scrollbar that attached to first container. Look at question Attach Horizontal Scrollbar to bottom of window if scrollable div is taller than window
I'm developing responsive web site for small devices. I need to show popup (pure div) and make possible vertical scroll due large content. But instead scrolling my popup main page scrolled.
My question is how could I disable main page scroll and scroll only popup?
You can set height of your .popup and then set overflow to auto
.popup{
height:50px;
overflow:auto;
}
Now, if your popup has a large contents that doesn't fit in 50 pixels by height and you'll scroll on it, contents in popup will be scrolled instead of whole document contents.
now I have a simple custom pop-up box and its overlay background that covers all the web page behind it (height:100%, width:100%). my question is how can I make the scoll bar only scroll the pop-up box and its background not the page behind them.
Thanks. sorry for my english.
Try to add a css for the pop-up box
overflow:scroll; //for both vertical and horizontal bar
overflow-x:scroll; //for horizontal bar
overflow-y:scroll; //for vertical bar
Here, you can find some help