I have created a top scroll bar. So when you make the panel smaller you need to scroll to see the rest of the menu.
This works fine on Safari on the Mac and on Google OS BUT not on a Windows computer, Instead, you get a nasty grey scroll panel at the bottom of the blue panel.
Is there a way to get rid of this please but still be able to scroll as shown in the example.
Hope you can help
Thanks
Tim
/Users/timcross/Desktop/111111.png
I cannot turn off overflow-x: scroll as I need this to scroll so not sure how to get around this
https://jsfiddle.net/timcross/hf8byg2r/
scroll panel is always visible because of the CSS property overflow-x and the overflow-y property has the value of "scroll",
this consider as the block always needs scroll,
you can change it to auto, then it will consider the correct behavior and add scroll panel if needed.
overflow-x: scroll;
Change to
overflow-x: auto;
same for the overflow-y
Related
I want to prevent the cards I have from leaving the div they are in when I resize the screen. I added overflow scroll in order to solve this and it works the way I would like but I don't understand what is causing this weird grey outline at the bottom of page. I dont have any styling that would cause it. I'm not sure if this a browser thing but is there a way to remove it?
I know the grey bar on the right is for scroll but what is the bar on the bottom across the card for?
Try overflow-y: scroll; instead of overflow: scroll;. This ensures the overflow scrollbar is only applied vertically.
I'm using CSS smooth scroll - which is triggered by clicking a div.
Now I want to disable manual scrolling, so you can only scroll by clicking that div and not by actually scrolling.
Is it possible? Thx.
CSS overflow property can help the situation.
Give,
overflow-y:hidden;
This will resist the scroll event over the section you are providing overflow hidden.
Please provide the overflow:hidden to the required section alone, so that it will not affect the other part of the page.
Using this little snippet below, you won't be able to scroll and the scroll bar wont be visible.
body {
overflow-y: hidden;
}
using ::-webkit-scrollbar isn't a possibility because you will still be able to scroll.
I'm having a similar problem to this here:Scroll bar not appearing?. My scrollbar is enabled using the comment overflow : auto. It's also working perfectly fine, if I use the top and down arrows on my keyboard. However the scrollbar is not visible on my modal window. I tried overflow-y: scroll as well as overflow-scroll.Didn't help. Any ideas whatelse I could try?
I am displaying some content via a pop-up and I want to disable the background scroll. What is a good way to do this via CSS?
You can use the CSS property overflow to show or hide scroll bars.
overflow-x -> Horizontal scroll bar
overflow-y -> vertical scroll bar
overflow-y: hidden; // hides vertical scroll bar
Please refer the documentation in w3School https://www.w3schools.com/css/css_overflow.asp
I'm working to build a CSS layout that has a fixed header, lefCol and Right Col, but the height of the MainCenterColumn (#mainCol) can scroll.
Here's what I have so far: http://jsfiddle.net/DscT6/
The issue with this is, on the mac you can scroll by dragging your fingers on the touchpad. I noticed that the scrolling only works if you mouse is over the MailCol, if your mouse is over the Left or Right Col the page doesn't scroll. Any ideas? Have you seen this? Suggestions? thanks!
Here http://jsfiddle.net/laukstein/DscT6/3/ it works fine.
I agree with polarblau, if you add overflow: auto that element will automatically have the scroll as needed, if you remove the overflow rule the entire page will have the height of the highest element and so it will scroll.