滚动隐藏浏览器的工具栏

最新推荐文章于 2024-06-20 09:54:15 发布

hangGe0111

最新推荐文章于 2024-06-20 09:54:15 发布

阅读量1.2k

点赞数

分类专栏： Web 文章标签：浏览器隐藏工具栏

本文链接：https://blog.csdn.net/hangGe0111/article/details/81981781

版权

Web 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

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.参考：

hangGe0111

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
滚动隐藏浏览器的工具栏

1.当纵向距离比较大时，浏览器可以纵向滚动，当纵向滚动时，浏览器会自动隐藏自己的工具栏；2.举例2.1代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8 /&gt; &lt;meta name="viewport" content="width=device-width, init...
复制链接

扫一扫

专栏目录