關於移動端,webview 監聽滾動條的坑

02-02

最近接到一個需求，中途需要動態設置滾動條的scrolltop值，發現在PC上都沒問題，然而上測試環境，各種問題，頁面老是不按照設想的那樣，最終發現是移動端對滾動條的處理不一致導致。

DEMO：

window.onload = function() {n window.addEventListener("scroll", function() {nttvar a = document.documentElement.scrollTop;nttvar b = document.body.scrollTop;nnttdocument.getElementById("win").innerText = a + "/" + b;n });nn document.addEventListener("scroll", function() {nttvar a = document.documentElement.scrollTop;nttvar b = document.body.scrollTop;ntttttnttdocument.getElementById("doc").innerText = a + "/" + b;n })n}n

監聽滾動條事件

<!DOCTYPE html>n<html>nnt<head>ntt<meta charset="UTF-8">ntt<title></title>ntt<link rel="stylesheet" href="css/reset.css" />ntt<style type="text/css">ntttbody {nttttwidth: 100%;nttttheight: auto;nttttposition: relative;nttt}ntttnttt.main {nttttwidth: 100%;nttt}ntttnttt.fix {nttttposition: fixed;nttttleft: 0px;ntttttop: 0px;nttttwidth: 100%;nttttheight: 200px; nttttbackground: red;ntttttext-align: center;nttttline-height: 50px;nttttfont-size: 40px;nttt}ntt</style>nntt<script type="text/javascript">ntttwindow.onload = function() {nttttwindow.addEventListener("scroll", function() {ntttttvar a = document.documentElement.scrollTop;ntttttvar b = document.body.scrollTop;nntttttdocument.getElementById("win").innerText = a + "/" + b;ntttt});nnttttdocument.addEventListener("scroll", function() {ntttttvar a = document.documentElement.scrollTop;ntttttvar b = document.body.scrollTop;ntttttntttttdocument.getElementById("doc").innerText = a + "/" + b;ntttt})nttt}ntt</script>nt</head>nnt<body>ntt<div class="fix" id="fix">nttt<h4>window.addEventListener：<span id="win"></span></h4><br />nttt<h4>document.addEventListenerspan：<span id="doc"></span></h4>ntt</div>nntt<div class="main">nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>nttt<h1>11111111111</h1>nttt<h1>22222222222</h1>nttt<h1>33333333333</h1>nttt<h1>44444444444</h1>nttt<h1>55555555555</h1>ntt</div>nt</body>nn</html>n

PC上：

手機上：

看到了嗎，就是折磨啃爹，所以移動端需要設置滾動條請使用

document.body.scrollTop，

PC上使用：

document.documentElement.scrollTop