Home Web Front-end CSS Tutorial Determine when the scroll bar slides to the bottom and trigger an event instance sharing

Determine when the scroll bar slides to the bottom and trigger an event instance sharing

Jan 19, 2018 am 10:32 AM
bottom trigger

This article mainly brings you an example to explain the event triggered when the scroll bar slides to the bottom. Has very good reference value. Let’s follow the editor and take a look. I hope it will be helpful to everyone. I hope it can help everyone.

The example is as follows:

$(document).on("scroll", function () {
 //真实内容的高度
 var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
 //视窗的高度
 var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
 //隐藏的高度
 var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
 //判断加载视频,文章,回答,医生
 if(pageHeight - viewportHeight - scrollHeight <=0){
  //事件
 }
});
Copy after login

Related recommendations:

jquery Enter key trigger event implementation method

How does js trigger an event after the mouse hovers for a certain period of time

jquery: solution to the problem of delegate repeatedly triggering events

The above is the detailed content of Determine when the scroll bar slides to the bottom and trigger an event instance sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use physical gestures to trigger fun on-screen FaceTime effects How to use physical gestures to trigger fun on-screen FaceTime effects Oct 12, 2023 pm 11:49 PM

In iOS17 and iPadOS17, Apple introduced Message-like FaceTime reactions on iPhone and iPad. Instead of selecting icons from a menu, you can trigger them with physical gestures during a FaceTime call. When you make a FaceTime video call on an iPhone running iOS 17 or an iPad running iPadOS 17, you can trigger screen effects such as hearts, balloons, confetti, fireworks, etc. The visual effects will fill the display in your FaceTime call video. Sometimes spectacular for others to watch. You are hands-free and can trigger these reactions using only physical gestures. For example, a thumbs up

Ways to Inspire Reaction Effects in FaceTime on Mac Ways to Inspire Reaction Effects in FaceTime on Mac Oct 10, 2023 pm 06:09 PM

In macOS Sonoma, Apple introduced message-like reactions for FaceTime. However, instead of being triggered by text, they can be triggered by gestures. When you make a FaceTime video call on a Mac running macOS Sonoma or later, you can trigger screen effects such as hearts, balloons, confetti, fireworks, and more that flood the display on the FaceTime call window. You can trigger these layer screen effects via the green FaceTime menu bar item, which includes a mini webcam view and buttons to trigger reactions, or you can go hands-free and trigger the same reactions using just physical gestures. For example, a thumbs up triggers a like, two

iOS 17: How to trigger reaction effects in FaceTime iOS 17: How to trigger reaction effects in FaceTime Sep 22, 2023 pm 01:25 PM

In iOS17, Apple introduced message-like reactions in FaceTime. However, instead of being triggered by text, they can be triggered by gestures. When you make a FaceTime video call on an iPhone running iOS 17, you can now trigger screen effects such as hearts, balloons, confetti, fireworks, and more that flood the display over the FaceTime call window. You can trigger these layer screen effects by long-pressing on a picture in FaceTime, which will bring up a menu of reaction options, or you can go hands-free and trigger the same reactions using just physical gestures. For example, one thumbs up triggers a like, and two thumbs up are fireworks. Likewise, a thumbs down does not count

Why does event bubbling trigger twice? Why does event bubbling trigger twice? Feb 22, 2024 am 09:06 AM

Why does event bubbling trigger twice? Event bubbling (Event Bubbling) means that in the DOM, when an element triggers an event (such as a click event), the event will bubble up from the element to the parent element until it bubbles to the top-level document object. . Event bubbling is part of the DOM event model, which allows developers to bind event listeners to parent elements, so that when child elements trigger events, the events can be captured and processed through the bubbling mechanism. However, sometimes developers encounter events that bubble up and trigger twice.

How to use JavaScript to automatically load more content when scrolling to the bottom of a web page? How to use JavaScript to automatically load more content when scrolling to the bottom of a web page? Oct 18, 2023 am 11:40 AM

How does JavaScript implement the function of automatically loading more content when scrolling to the bottom of a web page? Overview: Infinite scrolling is a common feature in modern internet applications. When users scroll to the bottom of the web page, more content is automatically loaded, providing a better user experience. JavaScript can help us achieve this functionality. This article will introduce specific code examples of how to use JavaScript to listen to user scroll events and load more content based on the scroll position. Specific implementation: First, in HTM

Why does event bubbling trigger multiple times? Why does event bubbling trigger multiple times? Feb 24, 2024 pm 08:33 PM

Why is the event bubbling triggered twice? In front-end development, we often encounter the concept of event bubbling. Event bubbling means that when a specific event of an element is triggered on the page, the event will be passed layer by layer to the upper element until it is finally passed to the document object. However, sometimes we may encounter the problem of event bubbling and triggering twice, even if we only bind the event listener once. So why does the phenomenon of repeated triggering occur? Let’s dive into the possible reasons below. First, we need to clarify the concept of event risk

How to remove bottom information in Discuz? How to remove bottom information in Discuz? Mar 10, 2024 am 11:36 AM

How to remove bottom information in Discuz? Discuz is one of the well-known forum systems in China. Many websites use Discuz to build forum communities. In the process of using Discuz, sometimes we may want to remove the bottom information to make the forum more concise and personalized. The following will introduce how to remove the bottom information in Discuz and provide specific code examples. First, enter the Discuz backend management system, find the "Template Management" option, and click "Template Management" to enter the template management page. In mold

How to implement distributed event driving and triggering in PHP microservices How to implement distributed event driving and triggering in PHP microservices Sep 25, 2023 am 11:52 AM

How to implement distributed event driving and triggering in PHP microservices With the popularity of cloud computing and microservice architecture, distributed systems have become standard for many large-scale applications. In distributed systems, event-driven architecture has become a common design pattern to decouple the dependencies between services and improve the scalability and maintainability of the system. In this article, we will explore how to implement distributed event driving and triggering in PHP microservices and provide specific code examples. 1. Design Ideas Before implementing distributed event driving and triggering, we

See all articles