Created
November 30, 2016 05:35
-
-
Save ufologist/5b9155a1042c49c50e8cf76659930890 to your computer and use it in GitHub Desktop.
overscroll - prevents the scroll from "passing through" to the body
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
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>overscroll - prevents the scroll from "passing through" to the body</title> | |
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |
<style> | |
html, | |
body { | |
height: 100%; | |
margin: 0; | |
} | |
.bg-placeholder { | |
width: 100%; | |
height: 100%; | |
padding-top: 10px; | |
font-size: 14px; | |
text-align: center; | |
background-color: #2e3132; | |
color: #999; | |
} | |
.scroll-view { | |
position: absolute; | |
top: 0; | |
left: 0; | |
bottom: 0; | |
right: 0; | |
overflow: auto; | |
-webkit-overflow-scrolling: touch; | |
} | |
.scroll-view__content { | |
min-height: 100%; | |
background-color: #fff; | |
overflow: hidden; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="bg-placeholder">网页由 你的域名 提供</div> | |
<div class="scroll-view"> | |
<div class="scroll-view__content"> | |
<h1>overscroll - prevents the scroll from "passing through" to the body</h1> | |
<p><strong>往下拉一下页面试一试, Don't be evil!</strong></p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur voluptatum delectus assumenda repudiandae, illum tenetur quasi inventore atque architecto impedit veniam dolores, quibusdam earum, molestias natus necessitatibus magni, nulla placeat.</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur voluptatum delectus assumenda repudiandae, illum tenetur quasi inventore atque architecto impedit veniam dolores, quibusdam earum, molestias natus necessitatibus magni, nulla placeat.</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur voluptatum delectus assumenda repudiandae, illum tenetur quasi inventore atque architecto impedit veniam dolores, quibusdam earum, molestias natus necessitatibus magni, nulla placeat.</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur voluptatum delectus assumenda repudiandae, illum tenetur quasi inventore atque architecto impedit veniam dolores, quibusdam earum, molestias natus necessitatibus magni, nulla placeat.</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur voluptatum delectus assumenda repudiandae, illum tenetur quasi inventore atque architecto impedit veniam dolores, quibusdam earum, molestias natus necessitatibus magni, nulla placeat.</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur voluptatum delectus assumenda repudiandae, illum tenetur quasi inventore atque architecto impedit veniam dolores, quibusdam earum, molestias natus necessitatibus magni, nulla placeat.</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur voluptatum delectus assumenda repudiandae, illum tenetur quasi inventore atque architecto impedit veniam dolores, quibusdam earum, molestias natus necessitatibus magni, nulla placeat.</p> | |
</div> | |
</div> | |
<script> | |
function overscroll(el) { | |
el.addEventListener('touchstart', function() { | |
var top = el.scrollTop; | |
var totalScroll = el.scrollHeight | |
var currentScroll = top + el.offsetHeight | |
// If we're at the top or the bottom of the containers | |
// scroll, push up or down one pixel. | |
// this prevents the scroll from "passing through" to the body. | |
if(top === 0) { | |
el.scrollTop = 1 | |
} else if(currentScroll === totalScroll) { | |
el.scrollTop = top - 1 | |
} | |
}); | |
// 如果你的内容区域(.scroll-view__content)不足以滚动, 那么必须阻止滚动 | |
// el.addEventListener('touchmove', function(evt) { | |
// // if the content is actually scrollable, i.e. the content is long enough | |
// // that scrolling can occur | |
// if (el.offsetHeight >= el.scrollHeight) { // 不足以滚动 | |
// evt.preventDefault(); | |
// } | |
// }); | |
} | |
overscroll(document.querySelector('.scroll-view')); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
我们在微信中打开网页时, 往下拉网页, 会在底部显示出网页的域名
那么问题来了, 是不是可以通过某种手段来自定义这个内容呢?
研究发现, 通过限制内层元素滚动条的位置, 我们可以变向地达到"自定义微信中往下拉网页时显示的域名提示信息", 让用户看见我们覆盖的那一层内容, 而非微信原本显示的内容.