Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Height should take into account padding-top and padding-bottom #21

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Height should take into account padding-top and padding-bottom #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e945247
Height must take into account padding
francescom Mar 7, 2016
a29b63d
Merge pull request #1 from francescom/francescom-patch-1
francescom Mar 7, 2016
7ec88bb
Added files via upload
francescom Mar 7, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 94 additions & 0 deletions examples/padding.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!doctype html>
<html>
<head>
<title>iNoBounce Example - Full</title>

<!-- Ensure correct presentation on iOS -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- iOCSS for styling -->
<link rel="stylesheet" href="http://lazd.github.io/iOCSS/css/io.css">

<!-- iNoBounce to prevent bouncing -->
<script src="../inobounce.min.js"></script>

<script>
// Allow toggling of iNoBounce with the toggle button
window.addEventListener('load', function() {
var enabled = true;
var toggle = document.getElementById('iNoBounceToggle');
toggle.addEventListener('click', function() {
if (enabled) {
iNoBounce.disable();
toggle.classList.add('default');
toggle.innerHTML = 'Enable';
}
else {
iNoBounce.enable();
toggle.classList.remove('default');
toggle.innerHTML = 'Disable';
}
enabled = !enabled;
}, false);
}, false);
</script>
</head>

<body class="iOCSS">

<header class="header">
<h1>iNoBounce</h1>

<div>
<button id="iNoBounceToggle" class="button">Disable</button>
</div>
</header>

<ul class="list scrollable" style="padding:64px;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<li>List Item 10</li>
<li>List Item 11</li>
<li>List Item 12</li>
<li>List Item 13</li>
<li>List Item 14</li>
<li>List Item 15</li>
<li>List Item 16</li>
<li>List Item 17</li>
<li>List Item 18</li>
<li>List Item 19</li>
<li>List Item 20</li>
<li>List Item 20</li>
<li>List Item 21</li>
<li>List Item 22</li>
<li>List Item 23</li>
<li>List Item 24</li>
<li>List Item 25</li>
<li>List Item 26</li>
<li>List Item 27</li>
<li>List Item 28</li>
<li>List Item 29</li>
<li>List Item 20</li>
<li>List Item 30</li>
<li>List Item 31</li>
<li>List Item 32</li>
<li>List Item 33</li>
<li>List Item 34</li>
<li>List Item 35</li>
<li>List Item 36</li>
<li>List Item 37</li>
<li>List Item 38</li>
<li>List Item 39</li>
<li>List Item 40</li>
</ul>

</body>
</html>
4 changes: 3 additions & 1 deletion inobounce.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@

var scrolling = style.getPropertyValue('-webkit-overflow-scrolling');
var overflowY = style.getPropertyValue('overflow-y');
var height = parseInt(style.getPropertyValue('height'), 10);
var paddingTop = parseInt(style.getPropertyValue('padding-top'), 10);
var paddingBot = parseInt(style.getPropertyValue('padding-bottom'), 10);
var height = paddingTop+paddingBot+parseInt(style.getPropertyValue('height'), 10);

// Determine if the element should scroll
var isScrollable = scrolling === 'touch' && (overflowY === 'auto' || overflowY === 'scroll');
Expand Down