Skip to content

Instantly share code, notes, and snippets.

@gerardcobas

gerardcobas/scrollOnWebkitColumn

Created November 28, 2014 14:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gerardcobas/e9e71e45c57aeaf73159 to your computer and use it in GitHub Desktop.
Save gerardcobas/e9e71e45c57aeaf73159 to your computer and use it in GitHub Desktop.
Download ZIP
Bug with native overflow scroll inside a -webkit-column-count
Raw
scrollOnWebkitColumn
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.scroll {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
background-color: blue;
height: 200px;
}
.column {
-webkit-column-count: 2;
background-color: red;
height: 400px;
width: 400px;
}
</style>
</head>
<body>
<div class="column">
<p>ALorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nisl vulputate augue venenatis ultrices. Ut
congue sapien ut nunc euismod accumsan. Nunc hendrerit ornare ullamcorper. Curabitur massa urna, gravida
molestie ligula quis, volutpat vestibulum lorem. Praesent eget tincidunt massa. Pellentesque malesuada elementum
est, ut viverra orci molestie at. Pellentesque gravida magna nulla, vel porta turpis mattis ut. Sed consequat
nulla tortor, sit amet interdum tellus aliquet eget. </p>
<div class="scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nisl vulputate augue venenatis ultrices. Ut
congue sapien ut nunc euismod accumsan. Nunc hendrerit ornare ullamcorper. Curabitur massa urna, gravida
molestie ligula quis, volutpat vestibulum lorem. Praesent eget tincidunt massa. Pellentesque malesuada elementum
est, ut viverra orci molestie at. Pellentesque gravida magna nulla, vel porta turpis mattis ut. Sed consequat
nulla tortor, sit amet interdum tellus aliquet eget. Duis consequat quam ut dapibus consequat. Nam vehicula
malesuada tellus eu viverra. Fusce porta semper imperdiet. Integer sed ligula sapien. Donec arcu quam, euismod
eget mi vel, finibus malesuada ante. Pellentesque cursus neque id magna pellentesque scelerisque. Donec sagittis
magna sem, ut maximus orci lobortis dictum. Donec ut commodo eros.
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment