I am getting the following behaviour while using the horizontal scroll bar. I have used the custom scroll bar design.
The horizontal scroll bar appears as expected when the content overflows as I have used overflow-x: auto. The scroll works on left/right arrow keys and wheel events. Also, it works fine with the touchpad. But it doesn't work when we click on the scroll bar and try to drag it. The scroll bar doesn't move. We should be able to scroll by clicking on the scroll bar and dragging it. For the same element, the vertical scroll bar works fine.
What could be the possible reason for this?
Related
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
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 created horizontal scroll menu as shown in w3schools how to guide,
but my problem is,
it shows a line/indicator while scrolling,
i want to Remove that line.
https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp
How can i remove that Line/Indicator?
I an using joomla, in my page I want to add horizontal scroll bar I am getting vertical scroll bar properly. this is my web Page screen shot
the inside portion is coming as iframe
I want to put horizontal scroll forcefully
You have to add the css
body {overflow-x: scroll;}
or overflow-y for the element that you want to give the scroll bar to.
In your code screen.css, line no. 1; overflow-x:hidden.
Make
overflow-x:scroll;
I have a page, but I can't see part of my page, because dthe Horizontal scroll don't appear. The vertical scroll is ok.
How can I put the horizontal scroll in my page ?
I tried CSS overflow-x:scroll but doens't work.