Chrome and Safari tend to autohide scrollbars and on macOS, it is pretty aggressive. There's a page on our website that has multiple sections and one of them has a scrollbar which needs to be visible at all times. Currently, it is only visible when the user actually scrolls or is actively on the specific div.
I am looking for a way to force the browser to show the vertical scrollbar at all times.
*There are a lot of solutions to this here and elsewhere but most of them don't work as they are outdated. I couldn't find any solutions that work consistently so, in case there's an answer that works somewhere on this site, feel free to mark this as duplicate.
If I understood it right, try this:
html {
overflow-y: scroll;
}
Source
Related
I searched this site and google and found no way to simply add a plain simple scrollbar to my webpage. Is there no such way? I'm rendering a web page and there is no scrollbar. Can't understand why the default behavior is faulty. Default is you want a scrollbar for overflow but no, with CSS everything has to be tricks and workarounds.
Are you probably looking for a way to always have a scrollbar present, also if the page is short enough to not have one?
Then, yes there is a way. You might wanna do:
html {
overflow-y: scroll;
}
I understand why one would do so.
It prevents jumps when navigating between pages, which have enough content to show a scrollbar and pages which do not.
I have a mysterious (at least for me) css background image problem, that I run into only with Google Chrome. I have found similar topics, but unlike those, here no Javascript, JQuery or anything else is involved, it is pure CSS. It's just not working as it should.
If you open up the page www.bodrogietterem.hu, the background image should be below the entire content area (as it is in other browsers). In Chrome a horizontal and vertical white area is appearing.
Once you start scrolling, the background image appears all okay, and it stays there from then on. Similarly, when you open the dev tool with inspect element, the background image is immediately there, and stays there, too.
this is the pertaining css:
body.page-node-1 div#main{
background:#FFFFFF url('/sites/all/themes/bodrogietterem/images/bodrogi_bodrogi.jpg') bottom;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:50% 135px;
padding-bottom:0px;
margin-bottom:0px;
}
and attaching two screengrabs on how it looks like, and how it should look like (well, I'm not allowed to attach these, as a new user, but have a look here:
http://www.bodrogietterem.hu/chrome_issue.JPG
and here
http://www.bodrogietterem.hu/should_look_like.JPG
It happens on sub-pages, too, but I think the root of the problem must be the same.
I'm using Vista, with up to date Chrome (20.0.1132.57), and up to date other browsers. btw, the second screenshot was taken in Chrome, too, but after opening the dev tool
many thanks for your kind help,
bests,
Zsolt
The latest version of Chrome is 21.0... so try updating chrome browser and see if it appears ok in the latest version. The screenshots lead to a 404 error page, so try uploading the screenshots again.
I also checked the page in IE7, IE8, IE9 the page looks good in all 3, IE7 however shows a horizontal scrollbar at bottom but the background image looks ok.
Your page looks fine in Chrome in windows 7 (Chrome 20.0.1132.57)
I have had problems in the past where various toolbars / addons that have been installed interfere with the CSS on a page quite significantly rendering Chrome to appear to bug out in isolated incidents. Try running chrome with no addons / plgins installed and see if it fixes your problem.
One observation on your CSS: #content contains floated elements that aren't cleared. I dont think that's the problem here but could be mixed with the above possibly.
Let me know if that helps at all.
Thanks for your helpful thoughts, I finally managed to resolve the problem.
While fiddling around, I measured the height of the white area, and it turned out to be 135px (which is exactly the top position of the background in the CSS above). So I decided that for whatever reason, that attribute was causing the problem, and I was right.
as a quick and dirty solution, I added 135px of white area to the top of the background image, and set the background-position property's top to 0px - which immediately fixed the issue.
as for the vertical white area, it was resolved by binding the background image to the #main-wrapper div instead of the #main div (it is a Drupal 7 build). Again, I don't exactly know why, but it fixed the problem instantly.
I love, how the web should be precise and logical, and it still stays random and ad hoc at times
thanks again for your time and effort, bests,
Zsolt
Had the same problem with two pages of http://www.stoerbeton.nl but I think I solved it after reading your above posts and some thinking.
The problem was probably in the general background: url; attribute and loading of the website css. I replaced all general background: #222222 url repeat etc.; for background-image:; , background-repeat:; and background-color:; etc.
Please let me know if your website works after editing your css. I'm still testing.
Greets, aquaster.nl
In my first attempt at a responsive web design I have run into a curious problem. When I resize my browser down to 615px width or less, a horizontal scroll bar appears. I'm not sure what element is causing this. I tried putting a border around each element using
* {
border:1px solid #FFF;
}
to help me visualize where the edges of the elements were but I don't see any borders extending beyond the window boundaries.
Can someone take a look at my site and give me some insight? http://www.ritualbliss.ca
Thanks!
Edit: So I only get the scroll bar in Firefox. Chrome works fine and the desktop version of Safari but on my iPhone it scrolls horizontally.
Edit: the site is for a legitimate massage business but some may consider the picture NSFW
Devin,
Try using a tool like Firebug for Firefox, IE Developer Tools, or the Chrome Developer tools. I'm sure Safari and Opera have similar tools, as well. These things will give you the ability to highlight and view the various properties of every visible HTML element on the page, including Javascript and CSS information.
One other thing to think about is not using the * selector in your CSS. I am not sure why you would want to put a border around every single element on your page because to me, that would not look visually appealing. The border style attribute adds the thickness of the border to whichever dimensions it is applied to. So, in your case, every element in your page has 2px added to both its height and width, even the "html" element. This could be why you have the scroll bar but can't tell where the extra pixels are.
Also, do you have any CSS styles that set a width or min-width to 617 pixels? Or a combination of elements that share the same area and add up to 617 pixels? Maybe a table with columns that are not shrinkable?
There is a lot to look at and your URL looks like it's probably porno or something so I cannot go there at work and check it out...
Good Luck,
Matt
Edit
I fooled around with firebug for a few minutes and agree with Ruben that handling the overflow would be a good idea. Although I think the setting should be on the body instead of #content.
Try this:
body { overflow-x: hidden; }
Like Ruben's answer it is hiding overflow, but you can still get the vertical scrollbar if people REALLY narrow down their browser.
can you please warn us when it's nsfw :s
use this css:
#content { overflow: hidden }
not the best solution but you have to use firebug to find out what's sticking out
padding and borders increase the width of your element too
css3 box-sizing:border-box solved this one.
This is a CSS related question, I got one good answer from my previous question, which suggested the use of some CSS code like overflow:auto together with a fixed height container.
And here is my actual implementation : on uni server
If by any chance you cannot access that server, try this
Please follow the instructions on screen and buy more than 4 kinds of tickets.
If you are using IE8, Opera, Safari, Chrome, you would notice that the lower right corner of the page now has a vertical scroll bar, which scrolls the content inside it and prevent it from overflowing. That's what I want to have in this section.
Now the problem is, this would not do in FireFox 3.6.2. Am I doing something not compliant to the CSS standard or FireFox has its own way of overflow control?
You can inspect the elements on screen, and all controlling functions are done in one javascript using jQuery. All CSS code is kept in a separated file as well.
According to the professor, FireFox would be the target browser, although the version was set to 2.0...
It seems you have to set a height / overflow to the <tbody> tag, not just the table (or maybe not the table at all, didn't test that).
So...
tbody { height: 130px; overflow: auto; }
And I specifically tested with "height", it seemed "max-height" didn't work as intended. Very odd behavior, indeed.
Have you tried overflow: scroll?
From the Google Results page, the examples I saw were working only in IE and one case in Opera.
Is there any way this can be done consistently across all browsers?
Also, is there a difference between the main scrollbar of the browser (which appears across the whole page) and the scrollbar in a text area withing the page? Can I manipulate only the latter if not the former?
You can create your own scrollbars within a page using a combination of CSS and JavaScript. See https://stackoverflow.com/questions/780674/scroll-bar-with-images.
However, rendering of the scrollbar outside the page is up to the browser.
WebKit recently added the ability to style the default scrollbars, but this still only applies within the page.
EDIT: It seems that MooScroll has managed to 'replace' the browser's main scrollbar by telling it there's nothing to scroll and then creating their own scrollbar at the right-most side of the window. Clever!
Steve
Steve had a good answer, but allow me to continue.
In IE 5.5-7 (but I think they're getting rid of it in 8), you could style the scrollbars with some proprietary MS CSS properties. I wouldn't recommend this.
Steve mentions that the scroll bar outside of the page is up to the browser. Whilst this is true, you could fake it by setting the body element to overflow: hidden and then placing a huge container in the HTML with height: 100%; width: 100%.
I wouldn't recommend you touch the user's scroll bars. They are a well known convention, and they are quickly recognisable by the end user. They know how to use the default OS styled scroll bars, not your quick attempt at cross browser CSS/JS implementation. I think it was Steve Krug that said 'Don't make me think!'
Have you ever seen Flash sites that rolled their own scroll bars? ugh!
There is no cross-browser method.
Short answer no.
The appearance of the browser is out of your control unfortunately - you're only supplying the contents. It's up to the browser to decide how it wants to scroll the contents.