Created
November 25, 2015 09:35
-
-
Save oblank/06b70c72b2b7bc8a33ec to your computer and use it in GitHub Desktop.
custom scrollbar like goolge map
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style type="text/css"> | |
.scrollable-x,.scrollable-y { | |
outline-offset:-2px; | |
/*padding-right: 6px;*/ | |
overflow-x:hidden; | |
overflow-y:hidden; | |
} | |
.scrollable-y.scrollable-show,.scrollable-y:focus,.scrollable-y:hover,.scrollable-show-all .scrollable-y { | |
overflow-y:auto; | |
} | |
.scrollable-x.scrollable-show,.scrollable-x:focus,.scrollable-x:hover,.scrollable-show-all .scrollable-x { | |
overflow-x:auto; | |
} | |
.scrollable-x::-webkit-scrollbar-track,.scrollable-y::-webkit-scrollbar-track { | |
background-color:#f0f0f0; | |
} | |
.scrollable-x::-webkit-scrollbar,.scrollable-y::-webkit-scrollbar { | |
width:6px; | |
} | |
.scrollable-x::-webkit-scrollbar-thumb,.scrollable-y::-webkit-scrollbar-thumb { | |
background-color:#888; | |
} | |
div.myautoscroll { | |
/* height: 40ex; */ | |
width: 40em; | |
overflow: hidden; | |
/* margin: 3em; */ | |
padding-left: 10px; | |
margin-bottom: 0px; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
position: absolute; | |
box-shadow: 0 0 20px rgba(0,0,0,0.3); | |
} | |
</style> | |
<div class="myautoscroll scrollable-y"> | |
<div class="content"> | |
<p> | |
This is a test for the stackoverflow question | |
<a href="http://stackoverflow.com/questions/10015389/">autohide scrollbars when overflow is auto</a> | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tincidunt | |
odio sit amet eleifend. Nullam mattis posuere est, ut hendrerit ipsum ultrices | |
non. Aliquam erat volutpat. Aliquam hendrerit, odio at euismod fermentum, arcu | |
nunc sagittis enim, eget malesuada nulla risus rhoncus massa. In in varius | |
metus. Mauris consequat leo a sem pretium sodales. Cras facilisis porttitor | |
ultrices. Sed ipsum metus, luctus sit amet blandit at, facilisis vel mauris. | |
Morbi leo turpis, congue dignissim imperdiet eu, laoreet mattis turpis. | |
</p> | |
<p> | |
Etiam eu velit magna, et euismod ligula. Aenean non ligula at tortor accumsan | |
blandit eget ut lacus. Vivamus commodo nunc egestas dolor sagittis rutrum | |
egestas metus sagittis. Pellentesque mollis eros ut nisl auctor tincidunt. Cras | |
ullamcorper ultricies arcu, id tincidunt ligula cursus eget. Ut accumsan, dolor | |
et ultricies consequat, urna lacus blandit massa, nec vestibulum sapien sapien | |
sed sem. Nunc mattis lorem ornare mauris viverra vel mattis mi euismod. Vivamus | |
quis neque massa. Integer at est diam, vel molestie libero. Donec non ipsum non | |
mauris posuere auctor. Quisque ac sapien sit amet diam elementum sagittis quis | |
et urna. Maecenas adipiscing orci sed dui eleifend bibendum. | |
</p> | |
<p> | |
Suspendisse massa tortor, sagittis dignissim sodales vitae, porta id lorem. | |
Aliquam at enim non libero consequat blandit. Nunc eleifend fermentum diam | |
vitae condimentum. Aliquam molestie magna ut purus malesuada a rhoncus orci | |
aliquet. Sed lacus ante, fringilla ut accumsan non, fermentum eu nibh. | |
Phasellus quis nisi sem, at hendrerit eros. Proin faucibus sollicitudin | |
tristique. Donec et velit magna. Sed eu dolor eu dui fermentum aliquet. Etiam | |
sollicitudin egestas dui iaculis tempor. Aliquam quis mauris in augue luctus | |
condimentum ut quis turpis. Donec porttitor, sapien non interdum dignissim, | |
arcu nunc ullamcorper nisi, at sagittis enim nisi fringilla risus. Nulla vel | |
ipsum nulla. Aliquam fringilla quam dapibus sapien mattis at ornare massa | |
fringilla. Nullam sit amet lorem quis ipsum euismod imperdiet. | |
</p> | |
<p> | |
In hac habitasse platea dictumst. Fusce vitae urna id ipsum ornare molestie. | |
Sed non urna in lectus tempor dictum non quis metus. Phasellus at dolor eget | |
justo dapibus congue posuere nec dolor. Nunc hendrerit bibendum tincidunt. | |
Vestibulum scelerisque enim nulla, venenatis sollicitudin dui. Donec feugiat | |
condimentum velit, at ultrices felis sagittis elementum. Sed a massa massa, | |
quis scelerisque sapien. Etiam non est felis, quis imperdiet diam. Aenean felis | |
sapien, egestas blandit egestas non, imperdiet convallis risus. Nunc lacinia | |
aliquet adipiscing. | |
</p> | |
<p> | |
Integer eu eleifend nulla. Duis elementum malesuada lectus at pretium. Praesent | |
euismod nibh sit amet dui interdum nec interdum elit pretium. Vestibulum ante | |
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis | |
molestie est eu nisi rutrum blandit. Nulla non luctus purus. Fusce fringilla, | |
dolor vel ultrices sagittis, quam purus aliquet urna, ac porta lectus velit ut | |
mauris. Maecenas lectus magna, imperdiet sit amet iaculis a, vestibulum nec | |
est. Sed tellus nibh, suscipit ut elementum vitae, venenatis placerat nibh. | |
Pellentesque mattis convallis iaculis. Fusce mauris ipsum, ullamcorper id | |
porttitor eu, luctus tincidunt lectus. Nulla facilisi. Aliquam erat mi, laoreet | |
nec condimentum sed, pulvinar a massa. Integer eget orci lacus, ut dapibus | |
arcu. Vivamus sollicitudin libero vitae libero ullamcorper interdum. Vivamus | |
egestas dignissim eleifend. | |
</p> | |
</div> | |
</div> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment