Scrolling on desktop but not on mobile browsers

HTML & CSS
12

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).

1 Like