"60fps Scroll Performance Hack"
Bootstrap 3.3.0 Snippet by sdcarte

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>60fps scrolling-hack</h2>
<p>Remove anchor-calculation on scrolling, so there is no observer. Fasten up the Scrolling.</p>
</div>
<div class="row">
<div class="col-md-4">
<a href="#" class="btn btn-default btn-xl">Button</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="#" class="btn btn-default btn-xl">Button</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="#" class="btn btn-default btn-xl">Button</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="#" class="btn btn-default btn-xl">Button</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="#" class="btn btn-default btn-xl">Button</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
.hover .element:hover {
box-shadow: 1px 1px 1px #000;
}
.disable-hover,
.disable-hover * {
pointer-events: none !important;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
var body = document.body,
timer;
window.addEventListener('scroll', function() {
clearTimeout(timer);
if(!body.classList.contains('disable-hover')) {
body.classList.add('disable-hover')
}
timer = setTimeout(function(){
body.classList.remove('disable-hover')
},500);
}, false);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit 2 Angular
Animated Vertical Bootstrap Carousel on Mouse scroll and Swipe

Questions / Comments: