I have a HTML which has lot of content and a vertical scrollbar appears as soon as the HTML is loaded. Now from this HTML a full screen IFRAME is loaded. The problem is when the IFRAME is loaded, the parent scrollbar still persists, I want to disable the scrollbar when the Iframe is loaded.
I tried:
document.body.scroll = "no", it did not work with FF and chrome.
document.style.overflow = "hidden"; after this I was still able to scroll, and the whole iframe would scroll up revealing the parent HTML.
My requirement is, when the IFRAME is loaded, we should never be able to scroll the entire IFRAME if the parent HTML has a scrollbar.
Any ideas?
If you want to use the iframe's scrollbar and not the parent's use this:
document.body.style.overflow = 'hidden';
If you want to use the parent's scrollbar and not the iframe's then you need to use:
document.getElementById('your_iframes_id').scrolling = 'no';
or set the scrolling="no" attribute in your iframe's tag: <iframe src="some_url" scrolling="no">.
with css
body, html {
overflow: hidden
}
The following JavaScript could work:
var page = $doc.getElementsByTagName('body')[0];
To disable Scroll use:
page.classList.add('noscroll');
To enable Scroll use:
page.classList.remove('noscroll');
In the CSS file, add:
.noscroll {
position: fixed!important
}
add this css
body.disable-scroll {
overflow: hidden;
}
and when to disable run this code
$("body").addClass("disable-scroll");
and when to enabled run this code
$("body").removeClass("disable-scroll")
I know this is an ancient question, but I just thought that I'd weigh in.
I'm using disableScroll. Simple and it works like in a dream.
I have had some trouble disabling scroll on body, but allowing it on child elements (like a modal or a sidebar). It looks like that something can be done using disableScroll.on([element], [options]);, but I haven't gotten that to work just yet.
The reason that this is prefered compared to overflow: hidden; on body is that the overflow-hidden can get nasty, since some things might add overflow: hidden; like this:
... This is good for preloaders and such, since that is rendered before the CSS is finished loading.
But it gives problems, when an open navigation should add a class to the body-tag (like <body class="body__nav-open">). And then it turns into one big tug-of-war with overflow: hidden; !important and all kinds of crap.
Answer :
document.body.scroll = 'no';
Related
I have to work on a project and I am facing a problem of not removing the scroll from the iframe. actually, I am trying to pass several pages in a single iframe. So the iframe height is not set according to the content.
I tried a lot of javascript code but none of them works.
<iframe src = "" scrolling = "no"></iframe>
<style>
iframe{
overflow: hidden;
}
</style>
Try this, it should disable the scrolling in iframes
This is a multi layered issue, not sure if it'll fly if I ask it all, but the issue I'm having is Lightbox related.
I am trying to get it working, when I click on an image, the img lightboxes open, but even with 'disableScrolling': true, it doesn't work. body does get overflow: hidden; from that lightbox option, but the page still scrolls.
So, I've got to figure out a hacky fix. I tried this js but it's not working:
$( ".smile-thumb-container" ).click(function() {
if($('body').hasClass('lb-disable-scrolling')) {
$('html').addClass('lb-overflow-fix');
} else {
$('html').removeClass('lb-overflow-fix');
}
});
I'm basically trying to say when I click on an img, body gets .lb-disable-scrolling. This is from Lightbox itself, now, I want to say when I click on the div that holds the img to check if <body> has .lb-disable-scrolling, which it'll have because lightbox does this. If body has that class, add a class to <html> called .lb-overflow-fix. When I close the img, <body> loses .lb-disable-scrolling so html should remove .lb-overflow-fix too.
.lb-overflow-fix in my css is overflow: hidden; I'm not sure why it works on <html> and not <body>.
I know actual sites aren't ideal, but I can't even get it working in a fiddle properly, so I have to assume my js is incorrect. This is the site the issue is on.
Because you set this CSS:
html {
overflow-x: hidden;
}
This changes how vertical scrolling is handled by default, and the result is that it's your <html> node that handles it, rather than the <body> node.
Remove that overflow-x: hidden; from the <html>, and suddenly your site works as intended.
It is a bad idea to hide horizontal overflow anyway, so I'd recommend not trying to.
document.body.height = document.getElementById("page-main").clientHeight + 400;
#page-main {
position:absolute;
width:100%;
height:2000px;
z-index:2;
background:#eeeeee;
}
#footer {
position:fixed;
width:100%:
bottom:0px;
height:400px;
z-index:1;
background:#aaaaaa;
}
<body>
<div id='page-main'>main</div>
<div id='footer'>footer</div>
</body>
I have a footer div with position: fixed; bottom: 0px; and a main content div with position: absolute;.
Basically the idea is to have the main content div act like a sheet of paper on top of the static background of the document, so you would scroll through the content of the page and when you get to the bottom you would need to be able to scroll a couple hundred more pixels to reveal the footer div below the main content div.
I allowed this in my landing page by finding out the height of the body necessary to facilitate this extra space at the bottom and setting the height using height: 1720px; on the body itself. However, I'd like to implement this in a way that it does not need to be constant, as I fear browsers and devices may have different rendered heights for the main content div and I'd like to use this on multiple pages without having to individually hard code the body height.
I tried using JavaScript to find the height of the main content div (using clientHeight, which seems to work perfectly) and add a couple hundred pixels to that number for the height of the body as follows:
document.body.height = document.getElementById("page-main").clientHeight + 400;
and also tried changing the following:
document.body.style.height
document.body.style.paddingBottom
This does not change the height of the body at all. I tried using a similar approach to change the body's background to red, which works, but for some reason it just refuses to change the height specifically. I've tried placing this script in the head, above the body, and at the end of the body. Doesn't help. Finding the clientHeight of the main content div works fine, adding 400 to that number seems easy enough, and I know the document definitely has a body, so I'm very confused as to why it could possibly be that JavaScript refuses to change the height of the body.
I've checked the console in Edge and Chrome and it seems there's no issue, so I'm completely lost here. Normally I can find answers online and I've never had to ask for help but at this point I feel like it's such a simple question and I have no idea why it won't work.
Sorry if this question is't written well, but does anybody have an idea of why JavaScript might not be allowing the changing of the height of the body?
TL;DR:
content div is positioned absolute and can change depending on scenario
footer div is positioned static on the bottom and is supposed to be revealed below the content div by allowing user to scroll a couple hundred pixels below the end of the content div
I want to achieve this by altering the height of the body, which works perfectly through hardcoding in html but for some reason JavaScript refuses to change the height of the body
Try it like this:
document.body.style.height = document.getElementById("page-main").clientHeight + 400 + 'px';
You have to specify the units to get a proper result. Like you would do in CSS.
Setting the height of the body element, the way you want in your question, is complicated by it's relationship with html element and their default CSS (like position: static on body), and by the overflow property. Read more here.
From my experiments on the chrome console, you can't set body height via document.body.clientHeight, it seems to be read-only. You'll need to set height (and possibly overflow) properties in CSS (via document.body.style for javascript).
However, I think the best solution for the effect you want doesn't involve setting body (or html) properties at all. Try this:
Let the footer element by default have CSS: display: none
Detect when user has scrolled to the bottom of the page (using jQuery or scrollTop) or bottom minus some offset
Change the footer's CSS to display: block (by toggling classes preferably, or editing the style property). This will automatically increase the body's scrollbar to accommodate the footer.
When user scrolls back up beyond the footer (or point 2 is false), you set it's CSS to display: none again.
With the above approach, there is no need to hard code or know before hand the height of your footer and non-footer content. You don't need to mess with html or body element CSS. You can also apply CSS animations if you want!
I have an HTML Document that looks a bit like this, only is far more complex and harder to control:
<body>
<div id="title">This div does not do anything, just stays at the top.</div>
<div id="container">
<div id="navigation">Some navigation</div>
<div id="content">Most of the content</div>
</div>
</body>
Then I have a stylesheet that includes the following:
#container
{
height: auto !important;
overflow: visible !important;
overflow-x: auto;
overflow-y: scroll;
position: relative;
width: auto !important;
}
This all works absolutely perfectly. The title section stays at the top of the page, the container div becomes scrollable if the content is long enough to need to scroll, otherwise it doesn't.
The problem is, that I am then using Javascript to add a whole lot more stuff to the content div. This means that the content div is getting longer than the page after it has loaded and this seems to mean, in IE8 at least, that the scrollbars on the container never get activated, so once the Javascript added content falls off the bottom of the page it becomes inaccessible.
It doesn't help that the minute I start tinkering with the IE developer tools, the scrollbars vanish altogether and I can't make them reappear, so it becomes somewhat hard to test.
I know IE8 has some issues with overflow-y.
You should try with this maybe.
-ms-overflow-y: scroll;
Hope that helps.
Hard to say if this will work without seeing more code, but why not remove the styles from your css and add them with javascript, once the content has loaded.
The solution that has worked was a simple hackaround of resizing the element with JavaScript to match the size it actually is once I have added the extra data to it, like this:
document.all['container'].style.height = document.documentElement.clientHeight+"px";
Of course, this doesn't entirely circumvent the problem- for that we need a new function:
function resizeResults()
{
var resultPanel=document.all["container"];
var topPanel=document.all["title"];
var newHeight= document.documentElement.clientHeight;
newHeight -= topPanel.clientHeight;
resultPanel.style.height=newHeight;
}
Then we can use window.attachEvent("onresize", resizeResults); to ensure that we don't lose the scrollbar or have it otherwise messed around when the user changes the window size.
Just remove the styles you have given for the element to make it scroll before loading ajax content to it.After loading ajax content then add those attributes again.
how to disable the scroll bars of the page.
and disable this button.
The scrollbars are a CSS issue. You can add this to your page (or the inner part to a CSS file):
<style type="text/css">
html, body {
overflow: hidden;
}
</style>
You can't disable that button (or any other method of scrolling the page); see this. However, you could scrollTo(0,0) anytime you detect scrolling. This might look ugly (page scrolls a bit, then jumps back up).
For disabling the scrollbars, you can try setting html, body { overflow: hidden }; I think some browsers may not honor this.
(Wouldn't it be better to just create a page that fits into the viewport, so that the scrollbars aren't shown?)
$(window).scroll(function() {
scroll(0,0);
});
If you want to use it you need to have jQuery imported.
document.body.scroll = "no";
document.body.style.overflow = 'hidden';
document.height = window.innerHeight;
should disable the scrollbars in most browsers.
See: http://www.eggheadcafe.com/community/aspnet/3/10088543/how-to-disable-document-body-from-scrolling.aspx
I am making a mobile website, but I don't want it to be a whole bunch of webpages, so I am making it one page with scrolling disabled. I did this with
<style>
html, body {
overflow: hidden;
}
</style>
This will remove your scroll bar. [I did it by accident]
#media screen{
body>div#header{
position:fixed;
}
body>div#footer{
position:fixed;
} `
This works:
* {overflow: hidden}
One problem I have when figuring it out was that I have a CSS drop-down (well slide across) menu on the page and that doesn't show when I use this method. I am still trying to figure out how to get the drop-down to work with this enabled.