To determine whether the content is scrolled to the end, you need to know the real height of the content area (that is, the scroll area), the position of the scroll bar from the top, and the visible height of the content area. This article mainly shares a js native judgment of whether the content area has scrolled to the bottom. The example code has a good reference value. I hope it can help everyone.
corresponds to the following three APIs respectively.
element.scrollHeight Gets the content height of the element,,, [Read-only attribute]
element.scrollTop can get or set the offset value of the element. It is often used to calculate the position of the scroll bar. If the container of an element does not generate a vertical scroll bar, its scrollTop value defaults to 0.
element.clientHeight Reads the visible height of the element [read-only attribute]
Directly below Quoting a classic formula on MDN
Determine whether the element scrolls to the end
If the element scrolls to the end, the following equation returns true, otherwise it returns false.
element.scrollHeight - element.scrollTop === element.clientHeight
Case-User Agreement
Only after the user has finished reading the agreement can they click to agree, which means that after the scroll bar reaches the bottom, it means Finish reading
tab
同意
Okay, today I suddenly saw this API on mdn. I thought about it
Element.scrollTop
Have you learned it? Hurry up and give it a try.
Related recommendations:
Implementation of the div internal scroll bar scrolling to the bottom and top functions
jquery page scrolling to the bottom Automatically load plug-in collection_jquery
Javascript implements code for DIV scrolling to automatically scroll to the bottom_javascript skills
The above is the detailed content of Detailed explanation of js to determine whether the content area is scrolled to the bottom. For more information, please follow other related articles on the PHP Chinese website!