Home Web Front-end JS Tutorial After Vue renders the page, the div scroll bar is positioned at the bottom (code attached)

After Vue renders the page, the div scroll bar is positioned at the bottom (code attached)

May 10, 2018 pm 02:23 PM
position bottom scroll

This time I will bring you the div scroll bar positioned at the bottom after vue renders the page (with code). After vue renders the page, the div scroll bar is positioned at the bottom. What are the precautions? What are the following? Let’s take a look at practical cases.

The examples are as follows:

1

2

3

4

5

6

7

//每次页面渲染完之后滚动条在最底部

updated:function(){

  this.$nextTick(function(){

  var p = document.getElementById('dialogue_box');

  p.scrollTop = p.scrollHeight;

  })

 }

Copy after login

1

2

3

4

5

6

7

//第一次页面渲染完之后滚动条在最底部

methods:function(){

  this.$nextTick(function(){

  var p = document.getElementById('dialogue_box');

  p.scrollTop = p.scrollHeight;

  })

 }

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website !

Recommended reading:

aggregate cascade query implementation steps

JS analysis of the method of generating a QR code image from a link

vue2.0 dynamic component and render usage instructions

The above is the detailed content of After Vue renders the page, the div scroll bar is positioned at the bottom (code attached). 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 map and location functions in uniapp How to use map and location functions in uniapp Oct 16, 2023 am 08:01 AM

How to use map and positioning functions in uniapp 1. Background introduction With the popularity of mobile applications and the rapid development of positioning technology, map and positioning functions have become an indispensable part of modern mobile applications. uniapp is a cross-platform application development framework developed based on Vue.js, which can facilitate developers to share code on multiple platforms. This article will introduce how to use maps and positioning functions in uniapp and provide specific code examples. 2. Use the uniapp-amap component to implement the map function

How to use a WordPress plugin to implement instant location functionality How to use a WordPress plugin to implement instant location functionality Sep 05, 2023 pm 04:51 PM

How to use WordPress plug-ins to achieve instant location functionality With the popularity of mobile devices, more and more websites are beginning to provide geolocation-based services. In WordPress websites, we can use plug-ins to implement instant positioning functions and provide visitors with services related to their geographical location. 1. Choose the right plug-in. There are many plug-ins that provide geolocation services in the WordPress plug-in library to choose from. Depending on the needs and requirements, choosing the right plug-in is the key to achieving instant positioning functionality. Here are a few

How to implement scrolling to a specified element position in JavaScript? How to implement scrolling to a specified element position in JavaScript? Oct 22, 2023 am 08:12 AM

How to implement the function of scrolling to a specified element position in JavaScript? In a web page, when we need to focus the user's line of sight to a specific element position, we can use JavaScript to implement the function of scrolling to the specified element position. This article will introduce how to implement this function through JavaScript and provide corresponding code examples. First, we need to obtain the position information of the target element. You can use Element.getBoundingClient

How to locate Apple wireless earphones if they are lost_How to locate Apple wireless earphones How to locate Apple wireless earphones if they are lost_How to locate Apple wireless earphones Mar 23, 2024 am 08:21 AM

1. First, we open the [Search] App on the mobile phone and select the device in the list on the device interface. 2. Then, you can check the location and click on the route to navigate there.

Methods to solve the problem of memory leak location in Go language development Methods to solve the problem of memory leak location in Go language development Jul 01, 2023 pm 12:33 PM

Methods to solve the problem of memory leak location in Go language development: Memory leak is one of the common problems in program development. In Go language development, due to the existence of its automatic garbage collection mechanism, memory leak problems may be less than other languages. However, when we face large and complex applications, memory leaks may still occur. This article will introduce some common methods to locate and solve memory leak problems in Go language development. First, we need to understand what a memory leak is. Simply put, a memory leak refers to the

Monitor iframe scrolling behavior Monitor iframe scrolling behavior Feb 18, 2024 pm 08:40 PM

How to monitor the scrolling of an iframe requires specific code examples. When we use the iframe tag to embed other web pages in a web page, sometimes we need to perform some specific operations on the content in the iframe. One of the common needs is to listen for the scroll event of the iframe so that the corresponding code can be executed when the scroll occurs. The following will introduce how to use JavaScript to monitor the scrolling of an iframe, and provide specific code examples for reference. Get the iframe element First, we need

HTML, CSS, and jQuery: Make an auto-scrolling bulletin board HTML, CSS, and jQuery: Make an auto-scrolling bulletin board Oct 27, 2023 pm 06:31 PM

HTML, CSS and jQuery: Make an automatically scrolling bulletin board In modern web design, bulletin boards are often used to convey important information and attract user attention. An auto-scrolling bulletin board is widely used on web pages. It allows the bulletin content to scroll and display on the page in the form of animation, improving the information display effect and user experience. This article will introduce how to use HTML, CSS and jQuery to make an automatic scrolling bulletin board, and provide specific code examples. First, we need a HT

How to locate the other party's mobile phone location on Amap - How to locate the other party's mobile phone location on Amap How to locate the other party's mobile phone location on Amap - How to locate the other party's mobile phone location on Amap Apr 01, 2024 pm 02:11 PM

1. Click to enter the Amap map software on your mobile phone. 2. Click My in the lower right corner. 3. Click to enter the family map. 4. Click Create My Family Map. 5. After the creation is successful, an invitation code will appear and can be shared with another mobile phone.

See all articles