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.
Related
I am using Quasar/VueJS for development. How can I remove the outermost scrollbar (this is for the actual body of the page).
So annoyed that I have already tried putting overflow:hidden everywhere but it is still there.
Since I have a scrollbar for my sidebar, I just dont want another scrollbar to be beside it, as it can be confusing for the user. As you can see, I am working on adding another scrollbar just beside the actual body of the page.
How can I get rid of the outermost scrollbar?
Codepen:
https://codepen.io/kzaiwo/pen/bGVrweM?editable=true&editors=101%3Dhttps%3A%2F%2Fquasar.dev%2Flayout%2Fdrawer
Working with Quasar, checkout the docs, more specific this class: no-scrollbar. apply this on the element of concern.
Adding the following to your main styling will make the scroll bar go away without losing the scroll functionality:
::-webkit-scrollbar {
display: none;
}
Be aware that this will not work for firefox and IE. More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
.scroll {
overflow: hidden;}
Add this class to your css
<q-layout container>
Remove container from q-layout.
<q-layout>
https://quasar.dev/layout/layout#qlayout-api
You can hide the scrollbar without loosing the scroll behavior with css...
/* Hide scrollbar */
::-webkit-scrollbar {
display: none;
}
This works on chrome for sure, probably on Safari aswell, not sure (probably not) if IE and Firefox.
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
The sticky menu on our site (http://462184.hs-sites.com/) is experiencing issues on some pages and not others.
For example the homepage, if you scroll half way down the page and try to use the menu, it hides momentarily. On the other hand we don't get this issue when on another page such as (http://462184.hs-sites.com/bookkeeping-plans).
Therefore I can only imagine it is some type of element on those pages conflicting?
Your support is greatly appreciated :)
Try removing overflow hidden from this element:
.header-container {
/* overflow: hidden; */
}
Just remove the line, or you can replace it with overflow:initial or overflow:auto;
Is there a way to disable scrolling? Not just the scrollbar, but the entire functionality from the browser window?
based on your answer to Keit you dont want to scroll be active when you have a lightbox open?
if that is the case you can add a class to the body at the same time as you open the lightbox with the following css
And the nice thing about this solution it keeps the scroll "space" so the site do not jump, its more like it disables it. hope this helps
body.noscroll
{
position: fixed;
overflow-y: scroll;
width: 100%;
}
$('body').addClass('noscroll');
$('body').removeClass('noscroll');
CSS
body
{
overflow: hidden;
}
javascript
document.body.style.overflow = "hidden";
jQuery
$("body").css('overflow', 'hidden');
If your GWT application is alone in your web page, you can use:
import com.google.gwt.user.client.Window;
// ...
Window.enableScrolling(false);
for example in your onModuleLoad function.
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';