H5解決瀏覽器,微信背景的上下滑動問題，脫離視窗的js區域性滾動解決方法
阿新 • • 發佈：2019-01-27
當我們使用手機瀏覽器或微信瀏覽器開啟Html網頁的時候，如果上下滑動頁面，頁面就會出現黑色的空白(如圖所示)。那麼如何解決滑動的時候如何避免出界，出現頭部和底部的黑底？
js程式碼：
var method ={
setScroll:function(isreturn,classname){//區域性滾動新增樣式local_scroll,回撥
if(classname==undefined){
classname="local_scroll";
}
classname="."+classname;
var elm=document.querySelector(classname);
var html程式碼：
<style>
body,html{
margin: 0;padding: 0;height: 100%;
.local_scroll{//區域性滾動
position:absolute; overflow:scroll; -webkit-overflow-scrolling: touch; top:0; left:0; bottom:0; right:0
}
::-webkit-scrollbar{//scroll滾動條設定
width: 0px; height: 0px;background-color: #fff;
}
}
</style>
<body>
<div class="local_scroll">
<!--這是內容-->
</div>
</body>解決方法說明：通過移除body元素在螢幕上滑動的時候連續地觸發的‘touchmove’事件，然後在body內部追加一層元素通過定位佈局，同時監聽螢幕上下滑動時間來實現，如果還有更簡單的方法介紹的請留言或者私信我。