I would like to add scrollbar if the page grows. When the page loads, I am hiding the scrollbar but it should expand only when the page expands.
I tried adding the following script but it did not work.
Firstly, I tried $("#OFormDiv").css("overflow", "auto"); which did not work. I am expecting to add scrollbar only when the page goes below the screen and you do not see the content unless you reduce the screen size.
Secondly, I tried below which hide the scrollbar in the first place but did not add scrollbar when the page grows.
$("#OFormDiv").css("overflow", "hidden");
Related
I am writing a single page app for mobile use antd-mobile,
There's s a Tabbar on the bottom of the page, and a list of items that u can see the background is gray, the problem is the Tabbar cover the content of the when I scroll down to the bottom.
How can I make the list area to be scroll area not the whole page?
Some code could help us help you... But there is multiple strategies you could use, all depending on your actual code and what you'd prefer to achieve.
Use margin-bottom on body. This will add a margin to the bottom of your pages, having it set to the height of your Tabbar, this will ensure that it never hides the bottom content. That is assuming your Tabbar is in a fixed position. This solution will make the scroll bar show on the entire page.
Use a defined content holder height, and set overflow-y:scroll. You could set the height of your content holder to be 100vh minus the height of your Tabbar. This way it is "fullscreen" and you can then apply overflow-y:scroll to make that part scrollable. This will display a scroll bar on the element, not the entire page.
I'm making a dynamic page, in HTML/CSS using Javascript and jQuery. The height of this page can change, and a scrollbar can appear or disappear. Also, I want the content to be centered. To achieve that, I use margin: 0 auto;. But when the scrollbar shows itself (or hides itself), the page moves a little on the side.
How can I prevent it from moving left and right ?
EDIT
Here's a jsfiddle to see what the problem is (sorry, the content is in French):
http://jsfiddle.net/r4jspomr/
You can click on the titles to extend/retract the content under it
it is default Behavior of browsers, you can disable scrollbar using the following code and then use a beautiful custom-scrollbar like this
$("body").css("overflow", "hidden");
When I load the page, a modal immediately is displayed. However, about half the time, it's impossible to scroll. I can see the scrollbar on the side of the window, but it doesn't let you scroll. Also, zooming the window into 150% allows scrolling to work again.
How can I make it so the user can scroll up and down the modal? I'm using jQuery.
Modals will generally remove the scrollbar and male your page eesize due to the fact that when a modal is loaded, you normally overlay the body elements which remives and scrollbara, causing the body or wcreen width to adjust.
I'm editing a wordpress theme and I want the main content area to be larger. But when I enlarge it beyond the limits of the screen it does not scroll. And I know the most common cause of this problem is position: fixed, but I only found two cases of this in the code and when disabling both it doesn't fix the issue.
The original code makes a div with the id of "content" have a scrollbar, but I made the div much larger and so I want the scrollbar to appear and be back in the default spot like most pages have it.
Resources: Here is the original page for reference. (You can just inspect the code from there since I haven't made any edits to it yet anyway.)
http://themes.themolitor.com/wpzoom/2011/04/first-blog-post-title/
You page has been setup in such a way that, a javascript file is placing an inline style to the content, and giving a dynamic height depending on the screen size.
and the content id has a overflow auto, which gives a scroll bar when the content overflows outside the parent element.
So if you wan to have the scroll bar removed either do "overflow: hidden;" (this will hide the content which overflows unfortunately.
Or you will have to rearrange the whole page structure.
Your problem seems to be in http://themes.themolitor.com/wpzoom/wp-content/themes/wpzoom/style.css, where html and body are set to overflow:hidden. If the content extends past the end of the page, it will not scroll. You can change it to overflow:auto (auto adds a scroll bar when there's too much content to fit), or you can just get rid of the overflow property because auto is the default behavior.
overflow:scroll /* always show a scroll bar */
overflow:auto /* show a scroll bar when the content of a box is bigger than the box itself */
overflow:hidden /* never show a scroll bar */
I am using jquery mobile in which I seperated the page content into three div's horizontally, that is each div is an page. I used this logic for loading the page with animation using jquery mobile load() method.
The problem is that I can able to see the page(first div) in which I can scroll, So that it is showing the second page(second div) which I dont want to see.
JS Code:
$(document).on("touchmove","#homePageContent",false);
The above code prevents the screen scrolling horizontally and vertically but I want to prevent only horizontall scrolling.
css overflow-x:hidden is also not working.