Window Sizes and Scrolling
JavaScript Window Sizes and Scrolling （JavaScript窗口大小和滚动）
For finding the width and height of the browser window, for scrolling the page using JavaScript, and more actions, the root document element document.documentElement is used. It corresponds to the <html> tag.
But, there are other essential methods and peculiarities we are going to cover in this chapter. （但是，我们将在本章中介绍其他基本方法和特点。）
Width/height of the Window
Width/height of the Window （窗口的宽度/高度）
For getting the window height and width, you can use clientWidth/clientHeight of document.documentElement , like this:
console.log(document.documentElement.clientWidth);
Please, also note that DOCTYPE plays a crucial role. For example, top-level geometry properties can work differently when there exists no <!DOCTYPE HTML> in HTML. But, in modern HTML, it is always required to write DOCTYPE.
Width/height of the Document
Width/height of the Document （文档的宽度/高度）
The core document element is document.documentElement involving the overall content. Hence, the document full size can be measured as document.documentElement.scrollWidth/scrollHeight. But, on the element for the whole page, properties like this don’t work properly. In Chrome, Safari, Opera no scroll exists, documentElement.scrollHeight can be less than documentElement.clientHeight . At first sight, it can sound weird. But, let’s see an example:
let scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
（document.body.scrollHeight、document.documentElement.scrollHeight、）
document.body.clientHeight, document.documentElement.clientHeight,
（document.body.clientHeight、document.documentElement.clientHeight、）
document.body.offsetHeight, document.documentElement.offsetHeight
);
console.log('Full height of the document, with scroll out part: ' + scrollHeight);
Getting the Current Scroll
Getting the Current Scroll （获取当前滚动）
For DOM elements, there is a current scroll state in elem.scrollLeft/scrollTop. （对于DOM元素， elem.scrollLeft/scrollTop中存在当前滚动状态。）
In the majority of the browsers document.documentElement.scrollLeft/Top operates, where it is necessary to use document.body rather than document.documentElement. （在大多数浏览器中， document.documentElement.scrollLeft/Top运行，需要使用document.body而不是document.documentElement。）
But, these peculiarities are not a must to remember, as the scroll is available in the specific properties window.pageXOffset/pageYOffset, like here:
console.log('Current scroll on top: ' + window.pageYOffset);
console.log('Current scroll on left: ' + window.pageXOffset);
However, the properties above are read-only. （但是，上述属性是只读的。）
Scrolling: scrollTo, scrollBy, scrollIntoView
Scrolling: scrollTo, scrollBy, scrollIntoView
DOM must be fully built for scrolling the page from JavaScript. （必须完全构建DOM才能从JavaScript滚动页面。）
You can scroll regular elements by changing scrollTop/scrollLeft.
The same can be done by applying document.documentElement.scrollTop/Left. Also, there is an alternative solution such as specific methods window.scrollTo(pageX,pageY) and window.scrollBy(x,y).
（您可以通过更改scrollTop/scrollLeft来滚动常规元素。
同样可以通过应用document.documentElement.scrollTop/Left来完成。 此外，还有一种替代解决方案，例如特定方法window.scrollTo (pageX, pageY)和window.scrollBy (x, y)。）
The scrollBy(x,y) method can scroll the page relative to its current position. The button below shows it:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<style>
#smallDiv {
height: 100px;
background-color: blue;
}
#bigDiv {
height: 1000px;
background-color: green
}
</style>
</head>
<body>
<div id="smallDiv">
<button id='btn'>Scroll the document vertically by 100 pixels</button>
</div>
<div id="bigDiv"></div>
<script>
btn.addEventListener('click', () => window.scrollBy(0, 100));
</script>
</body>
</html>
The scrollTo(pageX,pageY) method can scroll the page to absolute coordinates, in the way that the top-left corner of the visible part includes the (pageX, pageY) coordinates near the top-left corner of the document. It is similar to setting scrollLeft/scrollTop . （ScrollTo (pageX, pageY)方法可以将页面滚动到绝对坐标，就像可见部分的左上角包含靠近文档左上角的(pageX, pageY)坐标一样。类似于设置scrollLeft/scrollTop。）
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<style>
#divId {
height: 1200px;
background: green;
}
</style>
</head>
<body>
<div id='divId'>
<button id='elem'>Click to scroll</button>
</div>
<script>
const btn = document.getElementById('elem');
btn.addEventListener('click', () => window.scrollTo({
top: 500,
behavior: 'smooth',
}));
</script>
</body>
</html>
For scrolling to the very beginning scrollTo(0,0) can be used. （对于滚动到最开始，可以使用scrollTo (0,0)。）
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<style>
#smallDiv {
height: 300px;
background-color: blue;
}
#bigDiv {
height: 1000px;
background-color: green
}
</style>
</head>
<body>
<div id="bigDiv">
<button id='topBtn'>Click to scroll</button>
</div>
<div id="smallDiv">
<button id='bottomBtn'>Scroll to top</button>
</div>
<script>
topBtn.addEventListener('click', () => window.scrollTo({
top: 1000,
behavior: 'smooth',
}));
bottomBtn.addEventListener('click', () => window.scrollTo(0, 0));
</script>
</body>
</html>
The methods above work in the same way for all the browsers. （上述方法适用于所有浏览器。）
ScrollIntoView
There is another method - elem.scrollIntoView(top), as well. Calling elem.scrollIntoView(top) scrolls the page for making elem visible. In the case of top=true the document, the page will be scrolled for making elem appear on top of the window. The element’s upper edge will be aligned with the window top. In the case of top=false, the page scrolls for making elem appear at the bottom. The element’s bottom edge is aligned with the window bottom. The button, demonstrated below will scroll the page for making itself to show at the window top and the next button scrolls the page for showing it at the bottom:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<style>
h1 {
color: white
}
#content {
height: 700px;
width: 350px;
overflow: auto;
background: green;
}
#elem1 {
margin: 500px;
height: 300px;
width: 1000px;
background-color: white;
}
#elem2 {
margin: 500px;
height: 400px;
width: 1000px;
background-color: red;
}
</style>
</head>
<body>
<div>
<button id="btn1" onclick="scrollFunc1()">Scroll 1</button>
<br>
<button id="btn2" onclick="scrollFunc2()">Scroll 2</button>
<br>
<button id="btn3" onclick="scrollFunc3()">Scroll 3</button>
<br>
<br>
<div id="content">
<div id="start">
<h1>
Click on the scroll button</h1>
</div>
<div id="elem1">
<h2>Content 1</h2>
</div>
<div id="elem2">
<h2>Content 2</h2>
</div>
</div>
</div>
<script>
function scrollFunc1() {
let btn1 = document.getElementById("elem1");
btn1.scrollIntoView(false); // Makes the element
}
function scrollFunc2() {
let btn2 = document.getElementById("elem2");
btn2.scrollIntoView(true);
}
function scrollFunc3() {
let btn3 = document.getElementById("start");
btn3.scrollIntoView({
block: 'start'
});
}
</script>
</body>
</html>
Forbidding Scrolling
Forbidding Scrolling （禁止滚动）
Sometimes it is necessary not to scroll the document. In other words, to make it unscrollable. （有时有必要不滚动文档。换句话说，使其不可滚动。）
To meet that goal, you can set document.body.style.overflow = “hidden”. As a result, the page will be frozen on the current scroll. （为了实现这一目标，您可以设置document.body.style.overflow = “hidden”。因此，页面将被冻结在当前滚动上。）
Here is how to do it:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<style>
div {
width: 300px;
height: 1000px;
background-color: lightgreen;
}
</style>
</head>
<body>
<select onchange="ChangeScrollState (this);">
<option value="">show</option>
<option value="hidden">hide</option>
</select>
<div>
Select scroll hide or show
（选择滚动隐藏或显示）
</div>
<script>
function ChangeScrollState(select) {
document.documentElement.style.overflow = select.value;
}
</script>
</body>
</html>
So, with the first button above, you can freeze the scroll. With the second one, you can resume it. （因此，使用上面的第一个按钮，您可以冻结滚动。使用第二个，您可以恢复它。）
The disadvantage of this method is that the scrollbar disappears. In case it occupies some space, then it is free, the content will jump to fill it. （这种方法的缺点是滚动条消失。如果它占据了一些空间，那么它是免费的，内容将跳转到填充它。）