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> </template>Copy the code

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

The above content for reference and several output personal understanding,…