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.
Related
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;
............
}
}
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.)
WEBSITE LINK
The above link was a responsive site in the start. But due to the nature of the content, had to add a lot of tables etc and now when i zoom in the website on my browser ,it is does not show any horizontal scroll bars and same goes for when i try to view it on my phone.
i tried different ways like adding overflow-x:auto to the body and removing all the overflow: hidden but still am unable to see my whole website enlarged.
any help would be much appreciated
Remove this:
body {
overflow-x: hidden;
}
and this
#art-main {
overflow: hidden;
width: 100%;
}
The problem is that main div (art-main) is containing everything and is defined as:
overflow: hidden;
width: 100%;
So if you resize the page, the div is adapting his size to fit the screen, and the content that is outside that size is cutted out.
I think you should work on this.
I am new to css, i created a webpage using css and it looks perfectly as expected when browser is maximized. But when i retrying the web page, the div elements i used in the page overlap each other making the perfect mess of things...!
I tried wrapping the div element.
#wrapper
{
min-width:500px;
overflow-x:scroll;
}
and also tried to set minimum-width attribute to parent div. Nothing worked out...
Please Help.
Try
#wrapper
{
min-width: 500px;
overflow-x: scroll;
position: relative;
}
I am having trouble with a full page background in a test wordpress site. I can't get the page scroll bar to appear.
Any help would be appreciated.
[EDIT]
The issue is you added the following to your body tag.
position: fixed;
Remove that line and everything should work then.
That is probably because there is no need for a scrollbar because the page doesn't extend the full height of your screen resolution.
I just figured this out myself:
I changed this for the background image:
position: absolute;
to
position: fixed;
and deleted
overflow: hidden;
This allows the scroll bar to appear and the fixed background position makes the background stay in place. The background still re-sizes perfectly, this just lets your content scroll.
Then add the following to do away with the horizontal scroll that appears:
overflow-x: hidden; /*Horizontal scrollbar*/
-ms-overflow-x: hidden; /*IE 8 horizontal scrollbar*/