Hi,
I am building the following layout:
http://test.tutsandtips.com/test-page-1/
The concept is a full-size background image, a fixed transparent header (logo + menu), two transparent columns side by side, separately scrolling up-down as well as swiping left-right.
The issue I have is that the columns scroll up & down fine on desktop browsers but they don’t scroll on mobile browsers (e.g. iPhone 5S - Safari).
Any ideas how to fixed that?
Thanks.
It doesn’t scroll on desktop for me either (Chrome). You really have to be careful with overflow: hidden, especially on major elements like body. It’s just not viable in most cases. What are you really trying to achieve?
Hi ralphm,
May I ask what OS and browser you tested with on desktop? Did you try scrolling with the mouse (while the cursor is below the header and over one of the columns) or another way (i.e. swipe up/down on a touch screen)?
I am trying to achieve client’s requirement (Full-size background image, a fixed transparent header (logo + menu), two transparent columns side by side, separately scrolling up-down as well as swiping left-right).
Thanks.
Yep, overflow: hidden on the body prevents mouse scrolling. I’m on Chrome for Mac.
For a full-screen background image, you’re better off using something like CSS’s background-size property.
Thanks for the info. I have overflow:hidden for the body but overflow-y:scroll for the columns, to make them scrollable, while hiding the scrollbars for each column. The separate scrolling of the columns works on Windows - Firefox, Chrome, IE, Safari. I am trying to figure out what I to do to make it also work on Mac and mobile browsers.
I have the following for the background image:
body { background:url(...image url...) fixed center; background-size:cover }
Would you suggest using something else?
Hiding the scroll bars means it’s not clear that the columns scoll independently and that it’s necessary to have the mouse in a specific area of the page in order to scroll.
It’s not possible to scroll the columns using the keyboard, and mouse scroll doesn’t work if JS is disabled. (The layout breaks with JS disabled, too.)
All in all, I’d suggest a rethink here.
Hi, thanks for the comment. I understand and very well aware that this layout shouldn’t exist as it is nothing but an abomination. However, it is a client requirement and I am just trying to achieve it if I can with the available CSS/JS capabilities. If I conclude that I can’t within a reasonable time, I will just drop it.
Is there no way to explain to the client that it is unusable in its current state and they’ll lose visitors/business/money?
If he won’t listen to reason, pull out an indemnification contract for him to sign.
Hi,
It’s the visibility:hidden that you were using to hide the scrollbars that stops it scrolling in ios and safari.
#col1, #col2 {
visibility:hidden;
Also you cannot use background-attachment fixed and background-size:cover together in ios as the image will stretch to the whole content and not just the viewport (it’s a long standing issue with ios).
You can however place a fixed element to cover the body and then you don’t need the background-attachment fixed rule.
e.g.
This works on ios for the full page fixed image.
body:before {
content:"";
z-index:-1;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background:#333 url(http://test.tutsandtips.com/wp-content/uploads/2016/04/image1.jpg) center;
background-size:cover
}
If you really must hide the scrollbars then you can do it like this.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
margin:0;
padding:0;
height:100%;
overflow:hidden;
}
body:before {
content:"";
z-index:-1;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background:#333 url(http://test.tutsandtips.com/wp-content/uploads/2016/04/image1.jpg) center;
background-size:cover
}
#header {
position:fixed;
left:0;
top:0;
right:0;
min-height:80px;
background:rgba(100,100,100,0.8);
}
.left, .right {
position:fixed;
left:0;
top:85px;
bottom:-20px;
width:65%;
overflow:hidden;
}
.right {
left:auto;
right:0;
width:34%;
}
.left-inner, .right-inner {
position:absolute;
left:0;
top:0;
right:-20px;
bottom:0;
padding:20px;
background:rgba(0,0,0,0.5);
color:#fff;
overflow:scroll
}
</style>
</head>
<body>
<div id="header">Header</div>
<div class="left">
<div class="left-inner">
<p>test scroll left first </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left </p>
<p>test scroll left last </p>
</div>
</div>
<div class="right">
<div class="right-inner">
<p>test scroll right first </p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right</p>
<p>test scroll right last</p>
</div>
</div>
</body>
</html>
The above is working in ios and safari.
I don’t know how stable it will be in a real situation and you should take note of what others have mentioned about hiding scrollbars (although to be honest mac does hide the scrollbars by default so users don’t know where scrollable divs are anyway).
Thank you very much! I will implement your fix on my layout and see how things will work from my side. I will put a note here about the result. Thanks a lot.
I implemented your fix on my layout and it worked just as I needed! Thank you very much. Also thanks for the full-size background tip.
Is the following CSS required for this layout? I tried removing it and it didn’t make any difference.
html { box-sizing:border-box }
*, *:before, *:after { box-sizing:inherit }
html, body { height:100%; overflow:hidden }
Not specifically but I generally use that on all my layouts these days as it ensures that padding and borders do not add to the specified width.
I originally had some padding on the elements with width:65% and therefore didn’t want the element to expand but I removed the padding to an inner element and therefore wasn’t really needed.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.