huangwei9527 / Ink-wash-docs

水墨文档,一款基于egg+vue开发的在线文档管理平台,支持markdown文档, excel文档,原型托管等功能. http://139.199.172.193:7001/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

【fix】细节修复,修复当数据量过多的时候,没有正确显示滚动条的问题

cvpv opened this issue · comments

commented

当数据量溢出的时候,列表数据会直接溢出容器,并和底部copyright重叠,变成了全屏滚动。

查看代码发现在web\common\styles\index.scss文件中定义了.scroll-wrapper来自定义滚动条,说明作者本意不是全屏滚动。

修复办法:
web\common\styles\index.scss中,将.scroll-wrapper增加样式,改为如下

.list-wrapper{
  height: 100%;
  overflow: auto;
}

这样一切就回复正常了。

commented

另外分享下,我定制的滚动条,在作者的基础上修改, 使得和chrome默认滚动条表现一致。

.scroll-wrapper{
  ::-webkit-scrollbar-track-piece{
    background-color:#fff;
    -webkit-border-radius:3px
  }
  ::-webkit-scrollbar{
    width:10px;height:10px;
  }
  ::-webkit-scrollbar-thumb{
    height:30px;
    background-color:#c1c1c1;
    -webkit-border-radius:7px;
    outline:2px solid #fff;
    outline-offset:-2px;
    border:2px solid #fff
  }
  ::-webkit-scrollbar-thumb:hover{
    height:30px;
    background-color:#a8a8a8;
    -webkit-border-radius:8px
  }
}