1

I'm having issues with overflow-x:hidden. I realize there are quite a few posts about this topic, but none of them quite address my issue specifically, and none of the solutions from the already-posted issues have worked. So, I'm posting yet another "overflow:hidden;" question ...

I have a full-width (fixed) nav bar, and a full-screen slideshow at the top of my page. The rest of the content follows in a pretty straightforward manner (or so I think). There are fixed elements elsewhere on the page, and I've set the body to overflow-x:hidden; to prevent awkward overlapping on page resize.

The thing is, in Chrome and Firefox, I am still able to scroll L and R with the trackpad. No good.

I have rebuilt my page, as well as spent loads of time with developer tools, hiding, removing, and changing the position of various elements. I've tried adding overflow-x:hidden; to my .wrapper; this works OK, but still allows for some amount of sideways scrolling. I have also tried setting scrollLeft(0), as was suggested in this post here. I cannot figure out:

A) why overflow-x isn't working, and

B) where my overflowing content is coming from (at glance and with dev. tools, everything appears to be well-contained).

As I'm not sure precisely what's causing this issue, I can't include a neat JSFiddle snippet. The full (static) site is here: [edited, no longer necessary]

Community
  • 1
  • 1
printr
  • 157
  • 8
  • You might want to rethink your design. Re-size your browser, to say `500px` wide. Since your `overflow-x` is set to hidden, you can't scroll. Half of the content is hidden unless your browser is full screen. – Matthew Johnson Apr 10 '14 at 19:59
  • Understood. To be fair, my question isn't about the design. But yes, it could use some breakpoints and optimization. I probably won't implement too many break-points until I figure out this L/R scrolling issue. Also, I think the reason I applied `overflow-x:hidden` is because there was some element that caused it to be necessary (i.e., something is going outside the bounds of the wrapper). – printr Apr 10 '14 at 20:17
  • Or, to clarify: even when I remove `overflow-x:hidden`, I still have an issue, which is that some element on the page content extends beyond the bounds of the window, and I have so far been unable to pin down the root of *that* problem. – printr Apr 10 '14 at 20:27
  • I re-read my statement, and it seems harsh. I like the look and layout, I was just trying to point out that there are issues at smaller screen sizes. As to the actual question, I can't recreate the problem in my browser (no horizontal scrolling). – Matthew Johnson Apr 10 '14 at 20:34
  • No worries. If you disable `overflow-x:hidden`, there are issues at *all* screen sizes (horizontal scrollbar, no matter what). Anyway, I'll work it out eventually! – printr Apr 10 '14 at 20:54

3 Answers3

2

You would have to rebuild your page with a boxmodel, using css classes or a library to achieve a good grid system. Fixed elements are never a good option. The mentioned boxmodel grid can be customized for mobile usage depending on the min-width and max-width using media queries in css.

machinateur
  • 502
  • 5
  • 10
1

This isn't the most attractive option, but if the overflow-x: hidden; isn't working, it may do for a temporary fix while you work out the real problem:

http://jsfiddle.net/YWnpM/

$(window).on('scroll', function() { $(this).scrollLeft(0); //sets left scroll to 0px });

(I see that you said that you tried this, but it depends how you implemented it - if you did so out side of the event handler then it won't have worked.)

advert2013
  • 9,734
  • 3
  • 24
  • 35
0

I would just expand upon @advert2013's answer with trying to prevent excess scrolling:

$(window).scroll(function (e) {
    var $target = $(e.target);
    if ($target.scrollLeft() != 0) {
        $target.scrollLeft(0);
    }
});
frankish
  • 21
  • 1
  • 3