I came across an issue with one of our web sites:
In IE9 the page had a vertical scrollbar, but you couldn't use the mousewheel, arrow keys, pgup/pgdwn to scroll. The only way to scroll was to actually click/hold and move the scrollbar.
I removed the following from the css:
{
overflow-x: hidden;
}
Then scrolling worked as usual. Has anyone else come across this? It seems odd as overflow-x should hide the horizontal scroll bar? Why would it effect the vertical?
I have tried this on a test page and it acts as expected. So it must be a combination of things.
Try using the following code snippet. This should solve your issue.
body, html {
overflow-x: hidden;
overflow-y: auto;
}
overflow-x: hidden;
would hide any thing on the x-axis that goes outside of the element, so there would be no need for the horizontal scrollbar and it get removed.
overflow-y: hidden;
would hide any thing on the y-axis that goes outside of the element, so there would be no need for the vertical scrollbar and it get removed.
overflow: hidden;
would remove both scrollbars
I use iFrame to insert the content from another page and CSS mentioned above is NOT working as expected. I have to use the parameter scrolling="no" even if I use HTML 5 Doctype
Related
Hi, I was coding CSS, and then I meet the problem.
I had learned that if I code the CSS code bellow, the scroll bar will not display on the web page.
::-webkit-scrollbar {
display: none;
}
But I wanted to display the horizontal scroll bar and hide the vertical scroll bar.
How can I hide the vertical scroll bar, I don't know if the CSS code had something like ::webkit-y-scrollbar?
It may be possible to use the CSS overflow property. The overflow property allows you to control the content area and without viewing the rest of your code, it may work in this scenario. Try something like so:
html {
overflow-x: scroll;
overflow-y: hidden;
}
Documentation: https://www.w3schools.com/css/css_overflow.asp
How do I make my div’s scrollbar always visible?
.el {
height: 100px;
overflow: scroll;
position: relative;
}
overflow: scroll is not working. It seems my browser’s native behavior does not allow that. (I’m on macOS.)
Is there some workaround?
P.S. The scroll bar is visible on hover, but I need it to always be visible.
It's a browser issue, the browser have there own style for these elements.
If scrollbar go to hidden, it's for the user comfort, you can't change this...
So you can try to make div scrollable with custom scrollbar plugin in jQuery for example :
https://github.com/gromo/jquery.scrollbar
This plugin create fake scrollbars in javascript and permit to user to scroll into element. So browser don't apply his own rules for these scrollbar because they aren't.
You could try
html {
height: 101%;
}
WEBSITE LINK
The above link was a responsive site in the start. But due to the nature of the content, had to add a lot of tables etc and now when i zoom in the website on my browser ,it is does not show any horizontal scroll bars and same goes for when i try to view it on my phone.
i tried different ways like adding overflow-x:auto to the body and removing all the overflow: hidden but still am unable to see my whole website enlarged.
any help would be much appreciated
Remove this:
body {
overflow-x: hidden;
}
and this
#art-main {
overflow: hidden;
width: 100%;
}
The problem is that main div (art-main) is containing everything and is defined as:
overflow: hidden;
width: 100%;
So if you resize the page, the div is adapting his size to fit the screen, and the content that is outside that size is cutted out.
I think you should work on this.
My website http://dekomkommertijd.nl has a banner with moving clouds that I made with CSS animated (moving) div's. They enter left and when they leave the screen at the right side they create a horizontal scrollbar. Everything works as I want to, except I don't want the scrollbar, except for the content within my content div (canvas - with a width of 960px). Everything outside should be without a horizontal scrollbar and just leave the screen.
I tried several methods I found (mostly for static divs) but they don't work for my moving divs.
anybody knows how to fix this?
thanks.
Rick
The way you've described it suggests to me that you'd want your clouds and other content to overflow in different ways. The overflow is determined by the parent, so to handle the overflow differently you'd need to have two parents: one for the clouds, and one for the content.
If you choose to do it this way, setting the cloud parent to absolute positioning would take it out of the normal document flow so it doesn't interfere with the rest of your content. And setting the overflow makes it behave as you'd like.
width: 100%; /* Spans the whole document */
overflow-x: hidden; /* Hides overflow instead of displaying it */
position: absolute;
top: 0; left: 0;
Another solution would be handling the overflow identically for your clouds and other content. If you do it this way, you could just set it to be hidden on a mutual parent element, like the body.
This second solution might make more sense, as it's 1. simpler and 2. unlikely that you'll have anything other than the clouds overflowing.
Remove overflow-y: hidden from the following code:
html {
overflow-y: scroll; /* Remove This Line */
-webkit-font-smoothing: antialiased;
}
and apply following style on the body:
body {
overflow-y: auto;
overflow-x: hidden;
}
Hopefully, it will work.
http://redlineautoleasing.com/beta/
what could be causing the bottom scrollbar? i cant figure it out.
i tried this
http://blog.josh420.com/archives/2007/11/fixing-the-ie-overflow-vertical-scrollbar-bug.aspx
but the page kind of got messed up the bottom content got chopped off.
From your CSS:
body {
background-color:black;
background-image:url(../images/contentbg.jpg);
background-repeat:repeat-x;
height:536px;
background-position:top left;
color:white;
}
try adding overflow-x: hidden; and possibly also width: 100%;
or try adding
html{
width:100%;
overflow-x: hidden;
}
play around with these, the right combination should make it work OK.
It looks like your CSS has several things with large widths or margins which could be invisibly going off the side of the page - most likely a positioning difference between IE and other browsers.
In firefox, the firebug addon allows you to inspect all the elements of your page. If there's something like that for IE it should help you identify the offending element. Otherwise, maybe try setting all borders to a width of 1 pixel with various colours to try to highlight which element is sitting out there.
Had the same problem and this solved it for me:
html
{
overflow: auto;
}