Showing a scrollbar only in Firefox - html

I'd like to have a scrollbar at the bottom of the div but this CSS works only in Firefox, not Webkit browsers like Safari or Chrome.
div.hoge {
width: 500px;
overflow: auto;
}
I googled and found some pages mentioning you should use overflow-x or -webkit-overflow-scrolling but they didn't work either. Need to use some JSs? Any guesses?

If you need a scroll bar to appear always then, you can use overflow: scroll
If you need vertical scroller then, overflow-y: scroll
If you need only horizontal scroller then, overflow-x: scroll
As per the questions title: You can write mozilla specific styles like this
#-moz-document url-prefix() {
div.hoge {
width: 500px;
overflow: auto;
}
}

Here is an example fiddle of a div that scrolls on x. If you don't include the white-space: nowrap, then the text just wraps within the div and only the vertical (y-direction) scroll bar actually scrolls.
The fiddle shows two div elements; one with nowrap and one without. Also I put borders on the div to make it easier to see.

overflow: auto; doesn't make scrolling DIV, use overflow: scroll;
if you want it on any particular axis, then use overflow-x: scroll; or overflow-y: scroll;

Have you tried overflow-x:scroll; ?
Also make sure that the div.hoge has the enough height to display the scroll bar at the bottom.

Related

How to disable Horizontal scroll on a website NavBar with Bootstrap

I don't want to disable my horizonal scroll, I want it. Just that I want to remove scroll from certain elements like my NavBar, when I scroll, The Navbar also moves, and that makes it look ugly, I just want to enable horizontal scroll on a certain part of my site, (For Ex: A Table)
For Ref:
Disable scrolling on html/body and add it to your table like below
table {
display: block;
width: 100%; /* Needs to be adjusted accordingly */
overflow-x: auto;
}
Use tag in css
overflow-x: hidden;

How to remove Horizontal scroll-bar?

I am converting a Static Page to Responsive Page. When I resized my page to a lower width then horizontal scroll-bar and some amount of margin is also appearing in the bottom and right side of last div/Footer.
I have used overflow property in my code but still I am not getting the desired result.
body {
margin:0%;
padding:0%;
overflow-x: hidden;
}.
Due to some problem with imgur, I am unable to upload an image of my problem.
Please, suggest me some advise.
try this
body {
overflow-x: hidden;
max-width: 100%;
}
Open developer tools (F12) and locate the block that goes beyond the border of the page but the best, show your page code.
overflow-x: hidden; os only for horizontal overflow: This still allows for a scrollbar at the right side for vertical scrolling.
overflow: hidden; is both for horizontal and vertival overflow.

Pure css way to prevent scrollbar pushing content to the left?

Is there a way to prevent scrollbar from pushing content, or the entire page to the left with pure css?
I mean no hacks or anything.
I tried two javascript solutions:
1) Set body to overflow hidden, store the body.offsetWidth in a variable, then overflow visible and then subtract that offsetWidth with the current body.offsetWidth and apply the difference to the right margin.
2) Calculate the offsetWidth and apply it on the wrapper div on every resize.
What didnt work:
1) Position absolute.
2) Floating everything to the left was a bad idea.
3) Leaving the scrollbar visible (Looks bad).
4) Overflow-y hidden makes things user unfriendly.
There are a lot of ways to go around this issue though normally you won't mind a little push to the left:
Give overflow-y: scroll to body and make sure always there is a scrollbar.
Make use of the fact that viewport width includes the scrollbar while percentages do not account for it:
a. Giving width: 100vw to body element, or
b. Giving margin-left: calc(100vw - 100%) to the html element so that scrollbar or not, you have a fixed area to work on.
There is even a deprecated overflow: overlay property that draws over the page instead of shifting it to the left.
Just give your body a width of 100vw like this:
body{
width: 100vw;
}
Even though all the answers above are correct, I stumbled upon this issue and I had to come up with another solution.
Since my content width takes up the whole page and it has some properties to justify in the center, it was being pushed to the left and these options didn't prevent it from happening.
What fixed the problem for me was to add a padding of the size of the scroll when the scroll is added on hover.
I tested on Chrome and Edge. It's not a perfect fix but it is enough for what I need right now.
.scrollable {
width: 100%;
height: 91vh;
overflow: hidden;
padding: 0px !important;
}
.scrollable:hover {
width: 100%;
height: 91vh;
overflow-y: auto;
padding-left: 16.8px !important;
}
Unfortunately there is no other way to prevent your problem.
Just use
body {
overflow:hidden;
}
As an alternative, I recommend you to use a Framework for custom scroll bars. Or disable the scrollbar as shown in the above snippet and emulate it with an absolute positioned and some JS.
Of course you will have to consider calculating the height of the page and the offset of the scrollbar thumb.
I hope that helps.
To disable the horizontal scrollbar, you can use overflow-x, so it won't affect your vertical scroll:
body {
overflow-x: hidden;
}
Just set overflow-x to hidden on the element that has the scrollbar (usually this would be the body or the immediate children of it).
I had the same problem on my nextjs app which already had overflow-x set to hidden on the body. The below solution worked for me
#__next{
overflow-x: hidden;
}

How can I add a horizontal scroll bar to a table only if it does not fit in the enclosing DIV?

I have a standard HTML table. I didn't set the width of the table so it's okay if it fits on the page. However when the table contents are too wide then they extend outside of the enclosing DIV. Is there a way I can make it so that a scroll bar appears only if it's too wide?
Note I tried to add "overflow: hidden" to the DIV but then it just cuts off the table and I cannot see any more.
Use overflow:auto.
Read & Test it here
use overflow-x: auto; for horizontal scroll and overflow-y: auto; for vertical scroll and use overflow: auto; if both direction.
.containingDiv {
overflow: hidden;
overflow-x: auto;
}
Adding scroll bars only when necessary is the purpose of overflow:auto; in CSS and Overflow: scroll; will add them all the time, which probably isn't what you want.
maybe overflow: scroll or overflow: auto ?
This set a scrollbar if the content is to big.
Use overflow: auto on the div.
Note that it will only work is your div has a fixed width!
You want like This, This is also animate which is more helfull

issue with scroll

I had an issue with this scroll as in this image:
The issue is that I want only the vertical scroll to appear and not the horizontal scroll. I had used overflow:scroll attribute while coding. Will it look the same in Firefox and IE or is there any other way to do that?
Just use overflow-x: hidden; overflow-y: scroll; or overflow: auto; instead of overflow: scroll;.