©2020-2024 ioDraw All rights reserved
<> preface
It's just that what's been used in the project is element, Because the original scroll bar is so ugly , find elementui There is a hidden component in , namely element Scrollbars used on the official website , Scroll bar styles can be optimized . A personal test is available ,
It will only be displayed when the mouse passes by , Simple and beautiful .
<> text
First of all, the global introduction element,import ElementUI from 'element-ui';
* Easy to use – Just use the vertical scroll bar
Just use the vertical scroll bar , Outer layer box Set width and height , The inner layer is full of content , set up el-scrollbar The height of .
Important code ：.el-scrollbar__wrap { overflow: scroll; width: 110%; height: 120%; }
, Why set the width and height ? because ： In order to squeeze the original scroll bar out of sight !! This is very important . There is no such code , The vertical scroll bar displays normally , It can be horizontally overlapped with the original scroll bar . <
template> <div> <div class="box"> <el-scrollbar> <p> It's just that what's been used in the project is element</p> <p
> Because the original scroll bar is so ugly </p> <p> find elementui There is a hidden component in </p> <p> Optimize scroll bar style </p> <p> A personal test is available </p> </el-
scrollbar> </div> </div> </template> <style> .box { width: 200px; height: 100px;
background: aliceblue; } .el-scrollbar { height: 100%; } .el-scrollbar__wrap {
overflow: scroll; width: 110%; height: 120%; } </style>
* Use horizontal and vertical scrollbars
Let the contents of the outer box not wrap white-space: nowrap;, Other codes are the same . This also applies to internal cases ul,li,table And so on . <
template> <div> <div class="box"> <el-scrollbar> <p> It's just that what's been used in the project is element</p> <p
> Because the original scroll bar is so ugly </p> <p> find elementui There is a hidden component in </p> <p> Optimize scroll bar style </p> <p> A personal test is available </p> </el-
scrollbar> </div> </div> </template> <style> .box { width: 200px; height: 100px;
background: aliceblue; white-space: nowrap; } .el-scrollbar { height: 100%; } .
box.el-scrollbar__wrap { overflow: scroll; width: 110%; height: 120%; } </style>
3. Google browser directly changes the original scroll bar style .
This way, no other plug-ins are needed , Scrollbars can also look good , When compatibility is not considered , This style can be set globally , Then use it in detail el-scrollbar~~ Be lazy ,
<style> ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-
thumb{ background-color: #eee; border-radius: 3px; } <style>
<> Summary
There is also a very important point , stay vue Under the framework , style .el-scrollbar__wrap We need to write about things that affect the overall situation style in , Don't write about it style scope in , Otherwise it won't work .
If you're afraid of conflict with other styles , It can be prefixed .box .el-scrollbar__wrap{ overflow: scroll; width: 110%;
height: 120%;}. Width and height are not fixed , You can fine tune it according to your own page .
.el-scrollbar It can also be written as an inline style .
If this article helps you , Please give me some likes call oh ~o(￣▽￣)ｄo
Any other questions over~
Technology