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
Related
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%;
}
I'm doing some web development and for some reason on some of the pages the scrollbar on the right side of the window is transparent or white when using Chrome. I've looked through my css and I don't see any scrollbar styling set. The scrollbars look normal in firefox.
If it's because the page is so short that no scroll bar is required, but you still want it to show up, you can set the overflow-y CSS property to scroll on the html element of the page. For example:
html {
overflow: auto;
overflow-y: scroll;
}
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.
I was trying out the on hover scroll bar style that is used in many places but ran into a problem. The appearance of the scroll bar on hovering causes text to jump which looks jarring.
#scroll {
width: 200px;
height: 200px;
overflow: hidden;
}
#scroll:hover {
overflow-y: scroll;
}
This Fiddle shows the jumping text on mouse hovering
Could I somehow prevent the jumping of text while keeping the appearance of scroll bar on hover?
just use <p> tag for your text like this:
http://jsfiddle.net/pdbYz/6/
UPDATE for firefox:
http://jsfiddle.net/pdbYz/19/
I propose to have another container within div#scroll with fixed, slightly smaller width.
This way your text won't 'jump' when scroll appears. Since scrollbars have different width on different OS (Windows, Mac, Linux) you should leave some free space to the right, where scrollbar appears.
Please see my fiddle here: http://jsfiddle.net/5RXSW/
To make containers more visible I've applied paddings and background colors. You can tweak these styles for your needs, but please reserve some pixels to the right of div#scroll for scrollbar.
You can change the width of the container on hover, so that when the scrollbar appears, it pushes outwards instead of inwards. This prevents the text from moving.
http://jsfiddle.net/pdbYz/3/
To achieve this I've added this line to your CSS:
#scroll:hover {
width: 360px;
}
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