1.当纵向距离比较大时,浏览器可以纵向滚动,当纵向滚动时,浏览器会自动隐藏自己的工具栏;
2.举例
2.1代码
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>滚动隐藏浏览器的工具栏</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.div_fixed{
font-family: "微软雅黑";
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
background-color: orange;
color: #fff;
font-size: 18px;
position: fixed;
left: 0;
bottom: 0;
display: none;
}
</style>
</head>
<body style="height: 10000px;">
<div class="div_fixed">我能隐身。不信?可以滚动试试!</div>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript">
/*判断上下滑动:*/
var startX,startY,endX,endY,distanceX,distanceY;
$('body').bind('touchstart', function(e) {
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").bind("touchmove", function(e) {
//获取滑动屏幕时的X,Y
endY = e.originalEvent.changedTouches[0].pageY;
//获取滑动距离
distanceY = endY - startY;
//判断滑动方向
if( distanceY < 0) {
console.log('往上滑动');
$(".div_fixed").show();
}else{
console.log('往下滑动');
$(".div_fixed").hide();
}
});
</script>
</body>
</html>
2.2效果(在UC浏览器)
3.参考: