Moment For Technology

Use of the ElScrollBar component in element-UI

Posted on Jan. 30, 2023, 10:40 p.m. by Tushar Chopra
Category: The front end Tag: The front end element


When I looked through the document on the official website of element-ui, I found that the scrollbar style was relatively small when the content on the left navigation and the content on the right exceeded the screen. When I checked it with the browser review tool, I found that it used the style of el-scrollbar, which was named the same as the component style of element-ui. However, there is no documentation about the use of this scrollbar component in the document. After searching, it is found that this is a hidden component, which will not be written in the document in the official Github issues, and needs to use their own source code to call.

First, read the source code

The scrollbar component exposes 7 props properties: Native, wrapStyle, wrapClass, viewClass, viewStyle, Noresize, and Tag

{native: Boolean, // if this is true, elemental-ui custom scrollbars will not be enabled wrapStyle: {}, // wrapper custom style wrapClass: ViewStyle: {}, // noresize: {}, // noresize: Boolean, // If the container size does not change, it is best to set it to optimize performance tag: {// Generated tag type, default use 'div' tag wrap type: String, default: 'div'}}Copy the code

Two, the most concise use guide:

template div style="height:600px;"  el-scrollbar style="height:100%" div style="width:700px; height:700px; border:solid;" ... blabla..... /div /el-scrollbar /div /template Set the outer container height when used. And set the height of the el-scrollbar to 100%. El-scrollbar__wrap {overflow-x: hidden; }Copy the code

Iii. Complete attribute Usage Guide:

template div el-scrollbar style="height: 200px;" :native="false" wrapStyle="" wrapClass="" viewClass="" viewStyle="" :noresize="false" tag="section" div p V -for="(item, index) in 200" :key="index"{{index}} Here is some text. /p /div /el-scrollbar /div /template /p /div /templateCopy the code

This.$refs.**.update() can force updates

The above content for reference and several output personal understanding,

About (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.