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%;
}
Related
I fixed the height of the Bootstrap dialog, but for some reason a double scroll bar appeared, but I just needed to try overflow: hidden, but unfortunately it didn't solve the problem. The problem comes when I select a check box and the dialog jumps down since a longer part of the dialog comes in, I can't paste many codes because the components of the dialog are made up of several components.
So far I have done css formatting:
body {
overflow-y: hidden;
}
.dialog-layout-modal-body {
min-height: 662px;
max-height: 700px;
overflow: auto;
}
And the parent CSS code:
body {
overlfow: hidden;
}
Is there some bootstrap or css or any solution how can I fix this problem?
One is from browser scroll and another is from the dialog. Check if the Parent section has css property as 'overflow:auto;` which will cause this issue.
OR
you can do something like this for body tag.
body{
width:100%;
overflow-x:hidden; // hides bottom scroll
overflow-y:hidden; // hides vertical scroll
}
Scenario :
I am trying to use a mat-drawer like a modal sidesheet.
So when the drawer is open I don't want the user to be able to interact with anything outside of the sidesheet. This means that I don't want the user to be able to scroll the window when the sidesheet is open.
Is there a way to make it so that when the drawer is open scrolling is disabled and the scrollbar disappears?
Here is an example demonstrating the problem. Notice how when the drawer is open the page's scrollbar is still there and you can scroll the window as well as the drawer content.
How can I make this scrollbar disappear so that the user can only interact with the content of the drawer?
I have no idea why in the blazes does you div need to have a height of 2000 pixels, but anyways, here's a way to solve it.
On your app.component.css, add the following CSS properties overflow: auto and overscroll-behavior-y: contain to prevent the scrolling behaviour from 'escaping' your mat-drawer.
In a way, we can say that this creates a logical separation between the drawer's scrolling context and main application.
.drawer-content {
height: 100vh;
width: 300px;
background: orange;
overflow-y: auto;
padding-left: 20px;
overflow: auto;
overscroll-behavior-y: contain;
}
I have reproduced the demo over here. (I have left the other classes and CSS properties untouched.)
I'am trying to implement a scrollbar and preventing content from moving when the scrollbar appear
i found a solution that make the page scrollable but the scrollbar is invisible
how can i make it visible in the page.
this is my first solution:
mat-sidenav-content{
width: -webkit-fill-available;
&::-webkit-scrollbar {
width: 0px;
}
}
You should add background:transparent;
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;
}
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