Whenever I have content that expands the page height, a scrollbar appears on my rendered website. However, the scrollbar pushes my content to the left by the width of the scroll bar so when I navigate to a page where the height is less then the page height, there's a noticeable jump as the page width resizes. Is it possible to have the scrollbar sit on top of all my html content? Similar to how scrolling works in Chrome on iOS.
Ideally a css property like overflow:absolute where the scrollbar appears and the content isn't clipped would be the best but I know that doesn't exist.
EDIT:
In the image below, you can see that the scrollbar has a white background and has pushed my html content to the left. What I want is the html content to be underneath the scrollbar, as if the scrollbar had absolute positioning to the right.
I conferred with one of my colleagues who's running the same version of chrome as I am and his scrollbar does exactly what I want. Maybe AB testing on Google's part?
There is no reliable cross-browser way to do what you're looking for.
Different browsers handle the scrollbar differently -- some (including Safari and some versions of Chrome) already do exactly what you want, most others enforce a particular background-color and width for the scrollbar (not always the same width) and push the content over to make room. Any negative-margin or width-greater-than-100% trickery will either not work at all or will put some of your content underneath a non-transparent scrollbar in many browsers (and offscreen in others).
If the 'jump' when the scrollbar appears is too distracting, you can force the scrollbar to always be present with overflow-y:scroll.
Native scrollbar styling is limited, but here is a demo of how to do it:
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
http://codepen.io/zakkain/pen/phjBC
Chrome and IE respond to it very well. Firefox not so much, the issue is logged here https://bugzilla.mozilla.org/show_bug.cgi?id=77790 and is stale.
If you want firefox, you'll have to go with a custom scrollbar replacer.
And how to compensate for scrollbar is explained here: How to compensate for Vertical Scrollbar when it is not yet present
It works well, but most code pens can't show it, so you'll have to experiment on your own.
This is the OSX disappearing scrollbar issue (not sure if it's relevant for modern versions of OSX): CSS - Overflow: Scroll; - Always show vertical scroll bar?
As it would turn out, all I had to do was update my version of OSX...baffling. I'll accept #DanielBeck's answer because it's a reasonable answer to a coding question whereas here, the solution was to arbitrary update my laptop software.
Related
I'm coding a website and getting a strange behavior on the vertical scrollbar. This is happening on Chrome, Safari, and Firefox.
On IOS, it apparently is causing issues with page scrolling (i.e., it is difficult to get the page to scroll past the bottom of the initial view)
The puzzling part is that the undesirable effect only occurs when the viewport is sized below 683px wide
683px wide and above, the vertical scroll bar behaves normally (see attached graphic)
Website url is http://157.245.80.107
Any suggestions or insight? Thanks!
The theme is badly coded.
Whoever made it didn't bother to read the intro on do's and dont's for Bootstrap v3.4.1.
The quickfix would be to remove
overflow-x: hidden;
from line 9 of _main.scss (on html, body) and apply it to .main-container instead.
Another problem (same cause, basically) is the presence of class row on #navigation2 .navigation-header .mobile-main-nav. Either remove it if you can edit that template, or apply this CSS to counter the negative margins:
#navigation2 .navigation-header {
padding: 0 15px;
}
I have website that works well if opened in desktops and android device, but when I open in iOS devices such as Iphone and Ipad, the background did not fixed like on other devices, it will expand the background and create blank space on the right side of the page, and I used user-scalable=no to make user cant scrolling to the blank space, but still not works. Actually, I already use overflow-x: hidden; but my navbar didnt work like usual, the href didnt go to the target id. For example, news</li> it should go to the div id news, but it go randomly. So, what I should I use to prevent user to scroll in iOS?
this is the example of the blank space in iOS:
iOS safari has it's own set of issues. It generally tends to ignore all overflow: hidden you give on body and html. The only solution that i found till now was to either make you body exactly the size of your viewport and scroll the content within, or just make the position of the body fixed, in case your background is scrolling when you have a floating content on top that you want to scroll.
Having some trouble with a website. For some reason, there is a horizontal scroll-bar appearing allowing you to scroll a lot towards the right in IE8 even though there is no content there. I may have messed up with width's or margins or something, but it doesn't make sense because when I load the code outside of SharePoint it works fine, even in IE8. In SharePoint, inside a content editor web part, the code makes the horizontal scroll bar (although it doesn't appear in Chrome even with SharePoint).
The following code will hide the scrollbar for me, but you can still scroll to the right. The code just makes the scrollbar invisible.
html {
overflow-x: hidden;
}
Any other solutions would be very much appreciated.
In SharePoint 2010 the main content of the page resides inside s4-workspace Div and the ribbon is kept fixed at the top. So may be you can try to give the overflow attribute to s4-workspace div.
I have a fixed-width content area using margin:0 auto to keep it centered and a repeating background that fills the whole page. Nothing should cause the browser to use a horizontal scrollbar, unless the browser is less than browser is less than the fixed-width content. In IE however, a horizontal scrollbar is present and allows me to scroll slightly to the right which displays a 'gap' that appears to be the width of the vertical scrollbar. Curious as to why this is happening.
I have searched far and wide and found people with similar problems, but most discussion is regarding tables or other specific elements causing the problem that are not present on my page.
See link for example, open in IE8 and scroll right. Any help is appreciated.
http://finchsbrasserie.com/test_new_site/
Why don't you set the div css propety as overflow-x:hidden
I am a newbie to HTML and CSS and am trying to design a website, where the majority of text will be in boxes on the screen.
Each box will be coloured differently and will have more text than is visible directly
My question
Can I make the background colour of the scroll section, ie the bit between the two arrow heads match the existing background colour?
If I could even change the colour of the actual scroll bar, that would be even better
Finally, can I get rid of the horizontal scroll bar, as it is not required ? At present it makes my box have a white band along the bottom
There are several soutions to change the style of scrollbars on websites:
Via CSS:
This doesnt work reliable: For example it works only in IE, not in firefox. So I would avoid that.
Via JavaScript:
I suggest: Hide the browser-scrollbars and make your own scrollbar using javascript and some arrow-images, so you got full control over the style.
For example you could use JQuery and JScrollPane (demo). According to the documentation this works in all modern browsers (IE, Firefox ...). If the user would disable javascript support it would still work but the scrollbars appear unstyled.
Only Internet Explorer and Opera in quirks mode support colouring browser scrollbars, so you'll need to try a javascript solution.
Interestingly, CSS defines some system colors, so if you're (very) flexible with your design you could set the background of the scroll area to match one of those. An unlikely solution though.
For the horizontal scrollbar, you could try out overflow-x: hidden; overflow-y: scroll. That is intended to stop horizontal scrolling but allow vertical scrolling. I believe it is CSS3 so is unlikely to work in all browsers.
Update: Just saw this, which should meet your needs: http://www.leigeber.com/2009/09/javascript-scrollable-div/