cartodb4/perfect-scrollbar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow children native scroll

Browse Source 
Partly uses @DEFusion's #459 pull-request. Closes #455
This commit is contained in:
DanielApt 2016-02-22 22:32:06 +00:00
parent 9580e08886
commit f14b6a0d47
2 changed files with 86 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
examples/children-native-scroll.html Normal file
View File

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.my-list, textarea {
position: absolute;
top: 0;
left: 0;
width: 130px;
height: 200px;
overflow: scroll;
background-color: rgba(255,255,255,0.6);
}
.my-list {
left: 140px;
}
.my-list-two {
left: 280px;
overflow: auto;
}
ul {
margin: 0;
padding: 0;
}
li {
box-sizing: border-box;
padding: 10px 5px;
border-width: 0 0 1px 0;
list-style-type: none;
margin: 0;
}
li:nth-child(even) {
background-color: rgba(0,0,0,0.5);
}
textarea {
font-size: 120%;
}
</style>
</head>
<div id="Default" class="contentHolder">
<div class="content">
<textarea cols="20" rows="50">
Children inside perfect scrollbar can be natively scrolled by the mousewheel. It automatically works for textarea elements, other elements need the .ps-child class.
</textarea>
<div class="ps-child my-list">
<code>overflow: scroll</code>
<ul><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li></ul>
</div>
<div class="ps-child my-list my-list-two">
<code>overflow: auto</code>
<ul><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li></ul>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function () {
Ps.initialize(document.querySelector('#Default'));
};
</script>
</body>
</html>

23
src/js/plugin/handler/mouse-wheel.js
View File

@ -55,20 +55,23 @@ function bindMouseWheelHandler(element, i) {
return [deltaX, deltaY]; return [deltaX, deltaY];
} }
function shouldBeConsumedByTextarea(deltaX, deltaY) { function shouldBeConsumedByChild(deltaX, deltaY) {
var hoveredTextarea = element.querySelector('textarea:hover'); var child = element.querySelector('textarea:hover, .ps-child:hover');
if (hoveredTextarea) { if (child) {
var maxScrollTop = hoveredTextarea.scrollHeight - hoveredTextarea.clientHeight; console.log(child);
if (child.tagName !== 'TEXTAREA' && !window.getComputedStyle(child).overflow.match(/(scroll|auto)/)) {
return false;
}
var maxScrollTop = child.scrollHeight - child.clientHeight;
if (maxScrollTop > 0) { if (maxScrollTop > 0) {
if (!(hoveredTextarea.scrollTop === 0 && deltaY > 0) && if (!(child.scrollTop === 0 && deltaY > 0) && !(child.scrollTop === maxScrollTop && deltaY < 0)) {
!(hoveredTextarea.scrollTop === maxScrollTop && deltaY < 0)) {
return true; return true;
} }
} }
var maxScrollLeft = hoveredTextarea.scrollLeft - hoveredTextarea.clientWidth; var maxScrollLeft = child.scrollLeft - child.clientWidth;
if (maxScrollLeft > 0) { if (maxScrollLeft > 0) {
if (!(hoveredTextarea.scrollLeft === 0 && deltaX < 0) && if (!(child.scrollLeft === 0 && deltaX < 0) && !(child.scrollLeft === maxScrollLeft && deltaX > 0)) {
!(hoveredTextarea.scrollLeft === maxScrollLeft && deltaX > 0)) {
return true; return true;
} }
} }
@ -82,7 +85,7 @@ function bindMouseWheelHandler(element, i) {
var deltaX = delta[0]; var deltaX = delta[0];
var deltaY = delta[1]; var deltaY = delta[1];
if (shouldBeConsumedByTextarea(deltaX, deltaY)) { if (shouldBeConsumedByChild(deltaX, deltaY)) {
return; return;
} }