0

I have a few scrolling related issues on the website I'm working on: http://wvg.lexerim.com

Since I implemented the twitter ticker on top I could scroll to the right, to solve this I used the most upvoted solution in this thread: DISABLE the Horizontal Scroll (others didn't work).

This solution however results in the following two problems: - Scrolling isn't fluid anymore (especially on mobile devices) - The back-to-top button doesn't work anymore <- this isn't important, can simple disable it

Do you guys have any solutions for either the fluid scrolling or a cleaner solution for the horizontal scrolling problem?

Edit: additional information tryingI found out that the problem only exists in Safari and Chrome (and probably other webkit browsers) and not in firefox and that problem is caused by the overflow statements.

Edit 2: As this is apparently a Webkit (based) problem, two bug reports has been filled Safari/Webkit Chromium

Community
  • 1
  • 1
Raimond van Mouche
  • 97
  • 15

1 Answers1

2

I believe you're better off going this way in the CSS:

overflow-x: hidden;
overflow-y: scroll;

Also, perhaps webkit's overflow scrolling for touch may help?

Momentum Scrolling on iOS Overflow Elements

For what it's worth, just peeking at your site in Firefox, back-to-top is working for me. But yes, the scrolling with the scroll wheel is quite slow, and I don't see anything skimming through your code that should cause that.

Geo Ego
  • 1,315
  • 7
  • 27
  • 53
  • Thanks, I just tried it and tested a bit (will edit the question in a sec). I do prefer your code but the response is almost identical. Scrolling on desktop works good enough now and back-to-top works in firefox. On safari and chrome though it doesn't and scrolling on my iPhone isn't fluid. On the moment I disable both the overflows scrolling is perfectly fine but I can scroll to the right... Maybe a webkit (and Chrome's fork) bug? – Raimond van Mouche May 16 '14 at 16:12
  • I believe you're right. IE doesn't have the problem; scrolling is perfect. I've got one more stab in the dark; a webkit attribute I kind of remember from some time ago. I'll hunt it down and modify my answer. – Geo Ego May 16 '14 at 16:21
  • Another thought: do you have any Javascript elements that aren't loading in IE? Could it just be a matter of a JS performance bottleneck? – Geo Ego May 16 '14 at 16:25
  • Just checked the source and I'm not seeing anything that isn't loaded in IE (or Firefox for this matter). I have a solution for scrolling on iOS. Disabling back-to-top for Safari and Chrome would be acceptable but of course isn't preferred. – Raimond van Mouche May 16 '14 at 16:31
  • Oh I see you already found the same source, killed my response :) – Raimond van Mouche May 16 '14 at 16:43
  • Apparently there was some cache, I can scroll to the right on my iPhone when using `-webkit-overflow-scrolling: touch;` :( – Raimond van Mouche May 16 '14 at 18:40