Overflow-x with scroll function to stop scrolling is buggy compared with overflow to both x and y

Question

Okay so I'm testing this in Safari, I'm sure it's the same in other browsers but I haven't checked (yet)!

This piece of script works great and is not jaggerdy or buggy at all:

$('body').css('overflow', 'hidden');
$(window).scroll(function() {
  $(this).scrollTop(0).scrollLeft(0);
});

And this is what I need, but it seems to be very buggy and jaggerdy when you try and scroll, it scrolls a bit and the corrects itself (within about 100 milliseconds) whereas the above script doesn't let you scroll at all.

$('body').css('overflow-x', 'hidden');
$(window).scroll(function() {
  $(this).scrollLeft(0);
});

Is this a known bug or is there a fix at all?

EDIT: For those of you who are looking for an answer, there actually isn't one. This is only a known bug in Safari (most possibly only on Mac too).

I don't know what you're working on but it sounds like a boogie trap for users :) So this allows you to scroll for a 1/10 of a second but then scrolls you back over? — teewuane
– teewuane, Commented Sep 19, 2012 at 20:12
Yeah, the script works when it's placed on both the x and y but when it's simply focused on just the x or y, it seems to be very jaggerdy - lets you scroll for a few milliseconds and then fixes itself. Example here: jsfiddle.net/gCqKu — Oliver Tappin
– Oliver Tappin, Commented Sep 19, 2012 at 20:15

Community · Accepted Answer · 2017-05-23 12:03:20Z

1

The whole idea for an overflow:hidden is that it won't scroll. Hence you hide the scroll bars. Try overflow-x:auto and see if that scrolling is still jittery. If that ends up working you can hide the scroll bars with something like this example

EDIT: Why not put the .inside to be overflow:hidden via styles (that way you don't need the scrollTop function. Then when you need the area to scroll you can use the jQuery to update the CSS to make it back to overflow:auto.

Does that defeat the whole purpose of the task you are trying to code?

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Sep 19, 2012 at 19:57

ZombieCode

1,6583 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Oliver Tappin Over a year ago

Still happens with the overflow-x:auto, the idea here is that the scroll bars are hidden, and the overflow-x:auto is the exact thing I need, but for some reason is still letting the page scroll. I am using a MacBook and I am able to use the x scroll on my trackpad to scroll along the page, even though there are not any scroll bars. The example you've linked to is one of the first things I looked at and unfortunately does not seem to fix the problem. Here's an updated version of your answer to the other question with my problem: jsfiddle.net/gCqKu

ZombieCode Over a year ago

I think your script calls are counter-acting each other. When you put a '0' in the scrollLeft(0) I think it keeps the scrolling at the left most view. So in your jsFiddle Example it won't scroll down because the scrollTop is at 0 which means stay at the top of the page.

Oliver Tappin Over a year ago

Yes the idea is that the page doesn't scroll down but it seems to still be doing do for a split second. Like a laggy game or something. Would a screen video help?

Collectives™ on Stack Overflow

Overflow-x with scroll function to stop scrolling is buggy compared with overflow to both x and y

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related