JavaScript--监听浏览器窗口高度变化，并设置超出部分显示滚动条(完整代码)

先放上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a {
    
    
				text-decoration: none;
			}
			.statement-wrap {
    
    
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				font-size: 20px
			}
			.statement-wrap {
    
    
				z-index: 1230
			}
			.statement-wrap::after {
    
    
				content: "";
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.8);
				z-index: 10
			}
			.statement-wrap .title {
    
    
				color: #E60012;
				font-weight: 700;
				text-align: center;
				margin-bottom: 1.3em;
				font-size: 24px;
			}
			.statement-wrap .st-btn {
    
    
				display: inline-block;
				width: 160px;
				height: 40px;
				line-height: 40px;
				color: #fff;
				font-size: 14px;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: 2px;
				background-color: #E60012;
				border-radius: 26px
			}
			.statement-box {
    
    
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				background-color: #fff;
				max-width: 870px;
				max-height: 800px;
				border-radius: 10px;
				padding: 2.6em 3.3em;
				z-index: 60
			}
			.statement-box .txt {
    
    
				display: inline-block
			}
			.statement {
    
    
				max-height: 450px;
				overflow: auto;/*当超出设定的最大高度时 设置auto会出现滚动条显示所有内容*/
			}
			.text-center {
    
    
				text-align: center;
			}
			.paragraph {
    
    
				font-size: 16px;
				color: #555;
				letter-spacing: 1px
			}
		</style>
		<script type="text/javascript">
				//窗口高度变化执行
				function watchWindowSize() {
    
    
					var h = document.documentElement.clientHeight; //获取窗口高度  不包括滚动条
					var statementDom = document.getElementById("statement") //获取到内容部分
					var statementHeight = h - 320 //根据窗口高度设置内容高度  内容高度=窗口高度-周边以及非正文部分 注：320是非正文内容部分的大小，并不是固定写320
					statementDom.style.height = statementHeight + 'px' //将高度赋值给元素
				}
				//加载完毕时执行一次
				window.onload = function() {
    
    
					watchWindowSize()
				}
				//将事件侦听器函数附加到窗口的resize事件    监听窗口变化
				window.addEventListener("resize", watchWindowSize);
		</script>
	</head>

	<body>
		<section class="statement-wrap">
			<div class="statement-box">

				<div class="title">这里放了标题</div>
				<div class="txt paragraph statement" id="statement">
					<p>这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。这里是内容。</p>

					<p>这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。这里也是内容。</p>

					<p>这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。这里还是内容。</p>

					<p>这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。这里依然是内容。</p>

					<p>好了，没有内容了。好了，没有内容了。好了，没有内容了。好了，没有内容了。好了，没有内容了。好了，没有内容了。好了，没有内容了。</p>

					<p>强调一下！</p>

					<p style="text-align: right;"><span style="font-size:14px;">某某某<br />某年某月某日</span></p>

				</div>
				<div class="text-center">
					<a href="javascript:;" class="st-btn">ok</a>
				</div>
			</div>
		</section>

	</body>

</html>

原理通过监听窗口的变化来动态获取窗口大小

使用的方法`addEventListener()`监听window的resize事件

相关方法

//JavaScript
var div = document.getElementById("div");

//获取元素可视部分的宽度，
//即CSS的width和padding属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域
div.clientWidth;

//获取元素可视部分的高度，
//即 CSS 的 height 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域
div.clientHeight;

//元素在页面中占据的宽度总和，包括 width、padding、border 以及滚动条的宽度
div.offsetWidth;

//元素在页面中占据的高度总和，包括 height、padding、border 以及滚动条的宽度
div.offsetHeight;

//当元素设置了 overflow:visible 样式属性时，元素的总宽度，也称滚动宽度。
//在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域
div.scrollWidth;

//当元素设置了 overflow:visible 样式属性时，元素的总高度，也称滚动高度。
//在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域
div.scrollHeight;

//jQuery获取
//获取浏览器显示区域的高度 ：
$(window).height();

//获取浏览器显示区域的宽度 ：
$(window).width();

//获取页面的文档高度 ：
$(document).height();

//获取页面的文档宽度 ：
$(document).width();

//获取滚动条到顶部的垂直高度 ：
$(document).scrollTop();

//获取滚动条到左边的垂直宽度 ：
$(document).scrollLeft();

//计算元素位置和偏移量：
$(id).offset();

//offset方法是一个很有用的方法，它返回包含集合第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)

options.relativeTop　　
//指定相对计算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。

options.scroll　　
//是否把滚动条计算在内，默认TRUE

options.padding　　
//是否把padding计算在内，默认false

options.margin
//是否把margin计算在内，默认true

options.border
//是否把边框计算在内，默认true

JavaScript--监听浏览器窗口高度变化，并设置超出部分显示滚动条(完整代码)

先放上代码

原理通过监听窗口的变化来动态获取窗口大小

使用的方法addEventListener()监听window的resize事件

相关方法

猜你喜欢

使用的方法`addEventListener()`监听window的resize事件