How do I prevent screen scrolling on mouse drag when an absolutely positioned element is (partially) off screen?

Asked 28/5, 2013 at 2:33 Answered 13/10, 2015 at 16:15

Solved jquery html css scroll css-position

I don't want my web page to scroll. I have a <body> of width 100%, I set its overflow to hidden, and it generally works. No scroll bars, no mousewheel / touchpad gestures scroll. But if I click and drag just anywhere, I can still scroll.

The stinker is that I have a div absolutely positioned so it's sticking outside of its parent, partially (and sometimes entirely) off screen. For a handful of reasons, I can't get around that right now.

This fiddle illustrates my problem (I am seeing it in webkit), http://jsfiddle.net/ax5x7/2/

Dragging pretty much anywhere off to the right in the HTML will cause the page to slide along. It's tricky to go back because there are no scroll bars, so if you do this by mistake, it looks bad.

Poking around here found one suggestion related to jQuery's deprecated disableSelection(), but unless I'm doing it wrong (I applied it to body as well as all the children) it doesn't seem to prevent the behaviour. I also found a question a couple of years old that didn't seem to have a satisfactory solution. The bandaid is a bit kludgy, I'd rather not scroll to (0,0) on an interval.

Micrometer answered 28/5, 2013 at 2:33 Comment(0)

This will work, and it won't disable the selection of text:

$(document).on('scroll', function() {
  $(document).scrollLeft(0);
});

You can add $(document).scrollTop(0); if you want to disable scrolling down.

Here's a jsFiddle

Poll answered 28/5, 2013 at 4:0 Comment(2)

Thank you, this worked for me. I do get a shudder when I start dragging, but at least the screen doesn't get screwed up. – Micrometer 28/5, 2013 at 13:21

Works great. Simple and great in Firefox and Chrome. – Caresa 7/2, 2015 at 19:28

You can try this, but it will break selection of text:

$('html, body').on("mousedown", null, function(event) {
    return false;
});

http://jsfiddle.net/samliew/ThCJf/

Psychomancy answered 28/5, 2013 at 3:46 Comment(2)

It was hard to decide which answer to accept, I wish I could have accepted both. This one works really well, without the shudder so it looks better, but it does require me to go over my app to make sure it didn't break anything on the side. FWIW, I will be doing that. Thank you. – Micrometer 28/5, 2013 at 13:25

The issue I ran into was I lost the ability to focus on some text input fields. I could have whitelisted them, but since that would require some hunting anyway to see what else I broke, I just bit the bullet and kept my awkward absolute div within the document. – Micrometer 2/6, 2013 at 13:11

For a pure JS implementation that gives me no shudder on Chrome, at least:

function preventScroll(){
    var element = document.getElementById('my-element-id');
    element.onscroll = function(){
      element.scrollLeft = 0;
    };
}

Outwardly answered 13/10, 2015 at 16:15 Comment(0)

If i understood your question properly, this should do it.

http://jsfiddle.net/ax5x7/3/

please feel free to tell me more about the problem and I'll update accordingly.

I removed the padding/margin on the body tag.

updated the biggestThing

to look something like this:

#biggestThing {
    box-sizing: border-box;
    border: 1px solid black;
    width: 100%;
    background-color: #eee;
    height: 5em;
}

Lange answered 28/5, 2013 at 3:29 Comment(1)

Thanks for answering. I didn't downvote you, but unfortunately I don't have the luxury of adjusting the formatting for all my elements. My example above was a distilled example of the problem, unfortunately the app in question is more complex and I wouldn't be able to hunt down all the offending CSS, correct it and preserve the look, in time to ship. – Micrometer 28/5, 2013 at 13:27

Try to add overflow:hidden; in the css of the page_wrapper.

Chloride answered 30/5, 2014 at 10:2 Comment(0)

Recommended topics

Hot tags