element ui 的滚动条,Element UI 文档中没有被提到的滚动条-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui 的滚动条,Element UI 文档中没有被提到的滚动条。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

element ui 的滚动条,Element UI 文档中被提到的滚动条

Element UI 官网中有用到自定义的滚动条组件，但是发布的所有版本中都不曾提及，个中原因我们不得而知，不过我们还是可以拿过来引用到自己的项目中。

element ui 的滚动条,Element UI 文档中没有被提到的滚动条

使用的时候，

放在 <el-scrollbar></el-scrollbar> 标签内即可

如：

 <el-scrollbar class="jjy-scroll"> 
	<p>1111111111111</p>
	<p>2222222222222</p>
	<p>3333333333333</p>
	<p>1111111111111</p>
	<p>2222222222222</p>
	<p>3333333333333</p>
	<p>1111111111111</p>
	<p>2222222222222</p>
	<p>3333333333333</p>
	<p>1111111111111</p>
	<p>2222222222222</p>
	<p>3333333333333</p>
	<p>1111111111111</p>
	<p>2222222222222</p>
	<p>3333333333333</p>
	<p>1111111111111</p>
	<p>2222222222222</p>
	<p>3333333333333</p>
	<p>1111111111111</p>
	<p>2222222222222</p>
	<p>3333333333333</p>
	<p>1111111111111</p>
	<p>2222222222222</p>
	<p>3333333333333</p>
	<p>1111111111111</p>
	<p>2222222222222</p>
	<p>3333333333333</p>
	<p>1111111111111</p>
	<p>2222222222222</p>
	<p>3333333333333</p>
	<p>1111111111111</p>
	<p>2222222222222</p>
	<p>3333333333333</p>
	<p>1111111111111</p>
	<p>2222222222222</p>
	<p>3333333333333</p>
</el-scrollbar>

发现底部出现横向滚动条，

element ui 的滚动条,Element UI 文档中没有被提到的滚动条

问题大概在于
<el-scrollbar></el-scrollbar>
上的 height: 100% 与 margin-bottom 同时显示

element ui 的滚动条,Element UI 文档中没有被提到的滚动条

直接用 overflow-x:hidden 隐藏：

.el-scrollbar__wrap {
    overflow-x: hidden;
}

PS：通过阅读源码，可以看到暴露的几个属性

props: {
    native: Boolean,    // 使用原生滚动条
    wrapStyle: {},      // 包裹层
    wrapClass: {},
    viewClass: {},      // 内容层
    viewStyle: {},
    noresize: Boolean,  // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
    tag: {              // 编译后生成的标签，默认 `div`
      type: String,
      default: 'div'
    }
  },

所以，前面的代码可以插入这些属性

<div style="height:100%">
  <el-scrollbar
     :native="false" 
     wrapStyle="" 
     wrapClass="" 
     viewClass="" 
     viewStyle="" 
     noresize="false" 
     tag="section">
    <router-view/>
  </el-scrollbar>
 </div>

element ui 的滚动条,Element UI 文档中没有被提到的滚动条

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover,minimum-scale=1,maximum-scale=1,user-scalable=no,">
    <meta name="renderer" content="webkit">
    <meta name="imagemode" content="force">

    <title>JJYUI-PC首页</title>
    <meta name="keywords" content="JJYUI-PC首页">
    <meta name="description" content="JJYUI-PC首页">

    <link rel="stylesheet" href="./StaticFile/js/common/element-ui2.15.12/element-ui2.15.12.css" />
    <link rel="stylesheet" href="./StaticFile/css/common/iconfont/iconfont.css" />

    <link rel="stylesheet" href="./StaticFile/css/common/conmm.css" />

    <script src="./StaticFile/js/common/vueIEbug2/browser.min.js"></script>
    <script src="./StaticFile/js/common/vueIEbug2/polyfill.min.js"></script>
    <script src="./StaticFile/js/common/IeOutTips/IeOutTips.js"></script>
    <script src="./StaticFile/js/common/vue2.6.14.min.js"></script>
    <script src="./StaticFile/js/common/axios1.2.2.min.js"></script>
    <script src="./StaticFile/js/common/element-ui2.15.12/element-ui2.15.12.js"></script>

    <style>
        .jjy-scroll {
            width: 500px;
            height: 300px;
            border: #c1c1c1 1px solid;
            background-color: antiquewhite;
            overflow-x: hidden;
            overflow-y: hidden;
        }
        .jjy-scroll .el-scrollbar__wrap{
            overflow-x: hidden;
        }
    </style>
</head>

<body>
    <div id="jjyBox">
        <el-button type="primary" icon="el-icon-search">搜索</el-button> <br /><br /><br />
        <el-scrollbar class="jjy-scroll">
            <p>1111111111111</p>
            <p>2222222222222</p>
            <p>3333333333333</p>
            <p>1111111111111</p>
            <p>2222222222222</p>
            <p>3333333333333</p>
            <p>1111111111111</p>
            <p>2222222222222</p>
            <p>3333333333333</p>
            <p>1111111111111</p>
            <p>2222222222222</p>
            <p>3333333333333</p>
            <p>1111111111111</p>
            <p>2222222222222</p>
            <p>3333333333333</p>
            <p>1111111111111</p>
            <p>2222222222222</p>
            <p>3333333333333</p>
            <p>1111111111111</p>
            <p>2222222222222</p>
            <p>3333333333333</p>
            <p>1111111111111</p>
            <p>2222222222222</p>
            <p>3333333333333</p>
            <p>1111111111111</p>
            <p>2222222222222</p>
            <p>3333333333333</p>
            <p>1111111111111</p>
            <p>2222222222222</p>
            <p>3333333333333</p>
            <p>1111111111111</p>
            <p>2222222222222</p>
            <p>3333333333333</p>
            <p>1111111111111</p>
            <p>2222222222222</p>
            <p>3333333333333</p>
        </el-scrollbar>
    </div>
    <script>
        var jjyBoxObj = new Vue({
            el: '#jjyBox',
            data: {
            },
            created: function () {

            },
            methods: {
            }
        });
    </script>
</body>

</html>

效果

element ui 的滚动条,Element UI 文档中没有被提到的滚动条

最后附上官方github地址：

https://github.com/ElemeFE/element/blob/dev/packages/scrollbar/src/main.js

element/main.js at dev · ElemeFE/element · GitHub

文章核心内容摘录：

Element UI 中被隐藏的滚动条 - osc_khbto5ni的个人空间 - OSCHINA - 中文开源技术交流社区

https://www.cnblogs.com/_error/p/10484703.html
文章来源地址https://www.toymoban.com/news/detail-449842.html

到了这里，关于element ui 的滚动条,Element UI 文档中没有被提到的滚动条的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！