How to disable the scroll of a web page?

Asked

Viewed 45,427 times

17

I’ve been trying to disable one-page scrolling. All I have found are type solutions:

#container{
  overflow: hidden;
}

But that’s just occult scroll bar. How I would disable scrolling, even with it being presented on the screen?

Editing

It doesn’t matter if it’s with or other web technology client-side, I just want to know if there’s any way.

javascript jquery html css

  • css. The element that defines the scroll really is the overflow. Remove it from the css to see. and put it to us to see the code

  • I don’t have a css ready and I don’t want the solution to be in css. I just want to know if it exists some way to disable the scroll and not hide, which is the case of overflow.

  • Already tried to use the property position: fixed; in the container?

  • Still, no, like I would with Fixed?

  • Add position: fixed; to his class #container and see if you get the result you want

  • Worked for a div, but I wanted it like it was in the body, only I can’t pin the body.

  • Because the <body>? you happen to be using a <iframe> ?

  • No, but because I’m splitting the page into 3 large divs, and didn’t want it to be possible to scroll them. You say I should wrap these divs in a container?

  • In fact, you could apply position:fixed for each of them, in this way, it would work.

  • I found something that will definitely interest you @Felipeavelar see my answer

  • Now it worked... I discovered in the OS: http://stackoverflow.com/a/6920523/195417 I edited my answer.

Show 6 more comments

8 answers

12


You could use javascript to lock the scroll anyway, always setting the top to 0, each time any scroll event is called, see:

function setTopo(){
    $(window).scrollTop(0);
}
$(window).bind('scroll', setTopo);

And if you want to hide the scroll bar, you can apply the rule overflow: hidden; to your body.

  • 2

    That’s cool. I’ll leave the question open, to see if more legal solutions like this come up. (:

  • 3

    if I come across this I turn off the checkbox "Enable javascript" from my browser, scroll to page the same way, and turn on again after the rest keep working (this is what I do when any script bothers me, like bad form validators).

  • @Bacco An alternative is to join this solution with mine using CSS... I mean, not mine, I took the SOEN.

  • 1

    @Miguelangelo is, has a thousand ways to block and avoid, I mentioned more as a warning that for each technique has an outline :)

  • 2

    @Bacco If Chuck Norris tells you not to scroll the page I doubt there’s a way around.

  • 2

    @Pauloroberto you found the only true solution to the question :)

Show 1 more comment

5

Wrap your page in a div with a class specifies, for example:

<div class="wrap">Conteudo...</div>

And specify the height of all parent elements in 100%, so for example:

body, html {height:100%;}

and so:

div.wrap {height:100%; overflow:hidden;}

and set overflow Hidden no body also:

body {overflow: hidden; }

Demo

So you won’t have scrolling (scroll) enabled on your page.

  • 1

    This does not disable the scroll, if I press space, for example, it scrolls the same way.

  • How not, look at the example in jsFiddle, it works perfectly, if that’s not what you want you should rephrase your question.

  • Try to squeeze space in your example and see if it doesn’t scroll...

  • No scroll, do not know which browser you are using more tested in the 6 browsers I have here is only in IE managed to do something similar to a scroll by selecting the text down

  • I did in Firefox with just the space, I didn’t even have to select until the end.

  • Here also ta without scroll, pressing on any key on the keyboard, including in space. Ah, and also tried to select everything and drag and no bar appeared!!! Tested in Chrome and Firefox. I think you have some macumba on your mic... =)

  • Worked perfectly for me

Show 2 more comments

5

You cannot disable the scroll, but you can "pin" an element to the document so that the scroll will have no effect.

Something as simple as:

div.fixed { position: fixed; top: 0; left: 0; }

In your HTML:

<div class="fixed"> ... conteúdo ... </div>

If the "Fixed" element is the only one in your document, you have practically eliminated the scrolling of the entire document. Combine this with what you already had, which hid the scroll bars, and you’re done.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed_positioning

  • Maybe with css is not possible, but with javascript would be possible? I will edit my answer to specify that no matter the technology.

2

Hello, You can remove with the following javascript command:

$(document).ready(function(){
// REMOVER BARRAS DE ROLAGEM
  $("#SUADIV").click(function(){
    $("html, body").css({
        'height' : $(window).height() + 'px',
        'width' : $(window).width() + 'px',
        'overflow' : 'hidden'
    });
  });
});

The same identifies the size of your screen and removes the Scrolls [X] and [Y], With the CSS could remove overflow-x:hidden; overflow-y:hidden; but the jQuery commands above already account.

2

try this: <body style="overflow:hidden;">

and go back to count. ;) 0

2

Puts the style overflow: hidden in its element body... so there will be no scroll, nor through the keyboard will be possible.

EDIT

I discovered in the English OS the following CSS:

html
{
  position:fixed;
  width:100%;
  height:100%;
}

https://stackoverflow.com/a/6920523/195417

  • As I said in the comments of this reply, it is possible to scroll, even while in the body. Either by selecting the text or with space, has some ways to do yes.

  • True! = I’ll search further.

  • @Felipeavelar: It was wrong not to read your question completely before answering man... but now I think that’s what you want. Tell me later, I have to go to sleep.

  • That will do. Relax, thanks for the help. (:

1

Can be disabled with pure CSS:

body {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

-3

I found that you can hide only the sides if you want. Well so:

body { overflow-right:hidden; }

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.