0

I'm trying this technique on a page. Used it before and it seemed to work fine, but now in Chrome and Firefox, no horizontal scroll bar is displayed (which is good) but horizontal scrolling still occurs on two-finger swiping (which is bad).

I found this bug report which describes the same behavior, but is marked resolved. I tested in Safari, and horizontal scrolling was prevented.

The code (virtually identical to the code from the CSS-Tricks example):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
body {
overflow-x: hidden;
}
h1 {
position: relative;
background: hsla(0,0%,0%,0.8);
color: white;
width: 90%;
margin: 0 auto;
}
h1:before, h1:after {
content: "";
position: absolute;
background: hsla(0,0%,0%,0.8);
top: 0;
bottom: 0;
width: 9999px;
}
h1:before {
right: 100%; 
}
h1:after {
left: 100%;
}
</style>
</head>
<body>
<h1>Title of Page with full browser width bars</h1>
</body>
</html>

Any help greatly appreciated.

EDIT: Adding in overflow-x to the html element does prevent horizontal scrolling, but sometimes leads to other display errors (on a more fleshed out page I made, a dropdown menu kept getting cut off, even though that should be an overflow-y thing) and doesn't explain why the scrollbar isn't there, but scrolling still works.

kingstringy
  • 23
  • 3
  • have you tried using a percentage width as opposed to a pixel-based one on the pseudo elements? – Calvin Dec 13 '12 at 09:21
  • Just tested it. Horizontal scrolling still occurs if the bars are wider than the viewport. If the percentage is set too low, the bars end before the reach the browser window edges. – kingstringy Dec 14 '12 at 01:12
  • okay, what about applying `overflow-x: hidden` to a wrapping element (with a width of 100%) on the titles only as opposed to the entire html? – Calvin Dec 14 '12 at 10:17
  • That works, but undermines the advantage of using pseudo-elements. I'm still not clear on why scrolling is possible even though no scrollbar is rendered. – kingstringy Dec 15 '12 at 03:09
  • I think it may be related to the `body` tag in some way. you could always try have a container sitting just under `body` with `overflow-x: hidden` and see if that solves the issue? – Calvin Dec 17 '12 at 10:22
  • Thanks, Calvin. That's basically what I ended up doing, using a container element with plain old overflow, both x and y. Not satisfying for figuring out the "why" of the problem, but it works. – kingstringy Feb 03 '13 at 18:14
  • Glad you managed to sort it – Calvin Feb 04 '13 at 10:18

1 Answers1

1

I know this question was asked a long time ago but hopefully this helps somebody. Try adding the overflow-x hidden style to the html tag as well, for example:

html, body{
    overflow-x:hidden;
}
JVK
  • 95
  • 2
  • 13