I am working on an ionic project. I have a page with css looks like the code bellow.
my page contain a button that opens a modal popup, when I close that model the page freezes and stops scrolling.
When I change -webkit-overflow-scrolling to "auto" the issue goes a way, but the scroll becomes hard and not smooth.
So I am looking for a solution that keeps "-webkit-overflow-scrolling: touch" and enable scrolling in my page after closing the modal!
Would you please help?
--CSS :
my-page{
.mypage-content{
height: 100%;
width:100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
............
}
}
Related
I am new to web dev and have started using the create-react-app to start my own website. I'm running into an issue where the content cannot fit on the screen but I cannot seem to get my site to scroll. I've added the following code to the index.css file and the scroll shows up without a scroll bar. I think it's because the site hasn't detected overflow. However, I do not know how to fix this
html {
overflow-y: scroll;
overflow-x: hidden;
}
body {
position: absolute;
}
The page will only scroll once the height of the html element has exceeded the window height.
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 facing an issue with bootstrap 3 modal in iOS. Is there any working solution to prevent background scroll in iPhone, However it's working perfect on android but in iPhone whenever I open a modal and try to scroll background scroll works with a modal scroll as well.
I have tried all the possible solutions position: fixed not working. overflow: hidden is already applied. Thanks
This is the default style on the modal.
.modal-open {
overflow: hidden; }
I am using foundation framework. When I scroll down to the page in firefox and open the Reveal result in gray overlay only here i need to scroll to the top by myself to see the Reveal. I added this CSS to the model.
#id-of-the-reveal-element {
position: fixed;
top: 100px !important;
}
This is working fine but the slideDown and slideUp not working as normal instead it will just fadeIn and fadeOut in both Firefox and Chrome. What is the solution for this issue to get the normal behavior of the Reval as in Chrome.
Take a look here, at Ken Smith's Post
By adding onclick="javascript: location.hash='#page'; location.hash='';" to the button/link that opens modal it will automatically scroll for you.
Just replace #page with your modal id.
Unfortunately this is only a temporary workaround. Hope it helps though!
comment out your CSS...
#id-of-the-reveal-element {
position: fixed;
top: 100px !important;
}
whenever foundation reveal js tries to position its modal box on the center of the screen or the place you trigger the modal box, your CSS forces it to display 100px from top of the page with fixed position.
else you could post your code (structure) of the triggering part and the reveal modal box so that I could get a clear idea.
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;
}