preface

When filling in the form with card, the form is too long, so we need to return to the top to submit the form. After the failure to query the use of backtop component, we decided to use the scrollbar nesting method to achieve the functions shown in the following figure.

The body of the

I’m not going to introduce global import, I’m going to use it.

Theory of 1.

1. In the creation of HTML, wrap div first, then use el-Scrollbar to load the content to scroll. 2. CSS (1) The width and height of the outer div should be set. Important Set the style of el-Scrollbar and el-ScrollBar__wrap (set for each layer of the scrollbar)

.el-scrollbar {
      width: 100%;
      height: 100%;
      /deep/ .el-scrollbar__wrap {
        height: 100%; overflow: scroll; overflow-x: auto; }}Copy the code

Code 2.

1. The HTML part

<div class="show-area"> <! -- layer 1 scrollbar --><el-scrollbar>
       <el-card>       
           <div class="formArea">
           <! Scrollbar -->
               <el-scrollbar>.</el-scrollbar>
           </div>
       </el-card>
   </el-scrollbar>
</div>
Copy the code

2. The CSS part

// Set the first layer
.show-area {
    width: 100%;
    height: 100%;
    .el-scrollbar {
      width: 100%;
      height: 100%;
      /deep/ .el-scrollbar__wrap {
        height: 100%; overflow: scroll; overflow-x: auto; }}}// Set the second layer
.show-area .el-card {
    width: 700px;
    margin: 0 auto;
      height: 510px;
      overflow: hidden;
      .el-scrollbar {
        height: 100%;
      }
      .el-scrollbar__wrap{
        overflow: scroll; overflow-x: auto; }}}Copy the code

3. The source code

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

props: {
    native: Boolean.// Whether to use local. If set to true, the element-ui custom scroll bar will not be enabled
    wrapStyle: {},  // Wrap layer custom style
    wrapClass: {},  // Wrap custom style classes
    viewClass: {},  // Scrollable part custom style class
    viewStyle: {},  // Custom styles for scrollable parts
    noresize: Boolean.// If the Container size does not change, it is best to set it to optimize performance
    tag: {  // The generated tag type. The default is wrapped with the 'div' tag
      type: String.default: 'div'}}Copy the code