I have a web page I am designing which is almost finished. I have an icon to the right of the page which is used to display a menu when clicked, and it is right-aligned to the page. Currently, this icon and everything else on the right hand side of the web page is being covered by the vertical scroll bar. The current behaviour is that it appears only when the mouse curser is hovering over the browser window. I am wondering how it is possible to display the vertical scrollbar within a web page "always", when the page is scrollable (when the page height is greater than the height of the browser window).
For reasons of style, you can always show the vertical, native, web browser scrollbar using the following CSS property overflow-y : scroll; (see Mozilla documentation) to your body :
CSS
body
{
overflow-y : scroll;
}
JSFIddle
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?
My page layout features a header and a main element. I set the main element via css to overflow: auto, so that a scroll bar appears whenever the content is larger than the screen.
However when I press Ctrl+F to toggle the browser search and search for something, the results on the page are highlighted as usual but the "minimap" of search results in the scroll bar that usually is there is missing.
I can bring that "minimap" back when I remove the overflow: auto from the main element, however that makes the scroll bar go over all the page and not just the main element as I would prefer to.
I tried this in current versions of Chrome as well as Firefox and both show the same behavior.
This element is the only scrolling one and the scroll bar is on the very right of the window - it just starts below the header element, which I find aesthetically much more pleasing.
Is there any way that I can bring the search result highlighting "minimap" back to the scroll bar?
You can customize the default webkit scrollbar using css, javascript but it won't be easy to customize. Custom scrollbars come in handy in this case.
You can use the npm package rc-slider and customize the scrollbar based on your requirement. Here is a working example of the scrollbar which highlights clickable markers at every 6th row.
Situation: I've got an HTML page with multiple canvas elements on it. The canvas elements stretch the entire page (both vertically and horizontally), and there's no spacing between them.
Now I've got a problem on mobile devices, because if I touch-scroll over these canvas elements, the browser does not recognise this as a regular scroll event, leaving me unable to scroll the viewport at all.
Because the HTML page is taller than my viewport, I still want to be able to scroll to the bottom of the page, which I've now disabled. Any ideas to mitigate this effect are more than welcome.
You can see a demo of what I'm talking about # http://www.manuals.epaper-system.com/Tutorials/BXSLT4IndV6_220440/BXen/2014/20141115/BXEPen_v6_20141115_V220440.htm
Click on an article, then zoom in (to make the page taller than your viewport), close the article and try to scroll the page on your mobile browser while pinching on the PDF contents.
When making a site that doesn't require scrolling, the content is centred. I have placed all page content within a div : #Pagecontent, which has its margins set to auto so that the width of the screen does not matter - the content is always in the centre.
However, when the page requires scrolling because of the length of the content, all of the content on the page shifts slightly. How can I prevent this, as I find it annoying.
Hope this is an okay question. Cheers!
you can show the overflow all time by css overflow:scroll so the page wont move on the scroll bar
The HTML with overflow: scroll will force the page to always show the scrollbar whether it needs it or not.
html{
overflow:scroll;//for both vertical and horizontal
/* overflow-y: scroll; // for only horizontal
overflow-x: scroll; // for only vertical */
}
But there is no way you can prevent scroll bars appearing on any normal site because it is 100% dependent on the visitors screen resolution and/or preference for a maximised window or not.
The only way to prevent scroll bars shifting your page contents is to disable them via javascript, which may make some of your page unreachable by some visitors
Good read: How to prevent scrollbar from repositioning web page?
I've got a site with 3 pages, one of which has a scrollbar. When switching between a page without and the page with the scrollbar, the navigation bar changes places, and the transition looks terrible. This is because I have a css/div-based layout, and it centers itself on the window. So, since it will only be covering white space, is there a way to make the scrollbar sit on top of the page, instead of shrinking the page to be next to it?
No, you can't place the scrollbar over the page, but you can force it to be shown on all pages, so there will be no jumps:
html {
overflow-y: scroll;
}