element ui文档没有的组件信息（el-scrollbar）

element ui文档没有的组件信息（el-scrollbar）

文档源码中的参数（props）

props: {
    native: Boolean,  // 是否使用本地，设为true则不会启用element-ui自定义的滚动条
    wrapStyle: {},  // 包裹层自定义样式
    wrapClass: {},  // 包裹层自定义样式类
    viewClass: {},  // 可滚动部分自定义样式类
    viewStyle: {},  // 可滚动部分自定义样式
    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
    tag: {  // 生成的标签类型，默认使用 `div`标签包裹
      type: String,
      default: 'div'
    }
}

文档源码中的解析

let gutter = scrollbarWidth(); //滚动条宽度
let style = this.wrapStyle;//父组件传递的样式

if (gutter) {
  const gutterWith = `-${gutter}px`;
  const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`; //为什么这么做，目的是将滚动条区域往下/右挤然后超出区域使用overflow：hidden进行隐藏，稍后会有图解释

// 下面是样式组合

 if (Array.isArray(this.wrapStyle)) {
    style = toObject(this.wrapStyle);
    style.marginRight = style.marginBottom = gutterWith;
  } else if (typeof this.wrapStyle === "string") {
    style += gutterStyle;
  } else {
    style = gutterStyle;
  }
}

//创建元素 class名为el-scrollbar__view等并将用户传进来的内容放在该元素里

const view = h(
  this.tag,
  {
    class: ["el-scrollbar__view", this.viewClass],
    style: this.viewStyle,
    ref: "resize",
  },
  this.$slots.default
);

//创建元素名为el-scrollbar__wrap容器作用是产生原生滚动条，然后后面进行隐藏

const wrap = (
 <div
    ref="wrap"
    style={style}
    onScroll={this.handleScroll}
    class={[
      this.wrapClass,
      "el-scrollbar__wrap",
      gutter ? "" : "el-scrollbar__wrap--hidden-default",
    ]}
  >
    {[view]}
  </div>
);

let nodes;
//判断是否显示组件本身滚动条
if (!this.native) {
  nodes = [
    wrap,
    <Bar move={this.moveX} size={this.sizeWidth} />,
    <Bar vertical move={this.moveY} size={this.sizeHeight} />,
  ];
} else {
  nodes = [
    <div
      ref="wrap"
      class={[this.wrapClass, "el-scrollbar__wrap"]}
      style={style}
    >
      {[view]}
    </div>,
  ];
}
return h("div", { class: "el-scrollbar" }, nodes);

文档源码中的样式分析（若默认滚动条显示，鼠标滚轮无法实现滚动看这里思考）

将wrap设置操作：

  .el-scrollbar__wrap {
    overflow-x: hidden;
    //overflow：hidden全设置将无法随鼠标滚轮进行滑动
  }

！important ：这里的wrap设置margin是为了将默认的滚动条挤出可视区域范围内
view：父元素传递过来的内容
is-horizontal和is-vertical：是左右两个自定义滚动条，通过定位做的！