overflow:auto 自定义样式

.logs-block::-webkit-scrollbar {/*滚动条整体样式*/
    width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.logs-block::-webkit-scrollbar-thumb{/*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);
    background: #9e9e9e;
}

.logs-block::-webkit-scrollbar-track{/*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);
    border-radius: 10px;
    background: #EDEDED;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 如果将 `overflow` 设置为 `auto`,可能会导致 Element UI 中的 `backtop` 功能失效。这是因为 `overflow: auto` 的定义是如果内容溢出了元素框,则在元素内显示滚动条以查看内容。因此,如果您将 `overflow` 设置为 `auto`,则无法使用 `backtop` 功能将页面滚动到顶部。为了解决此问题,您可以尝试将 `overflow` 设置为 `scroll` 或 `hidden`,以查看是否可以正常使用 `backtop` 功能。 ### 回答2: 在Element UI中,backtop组件用于快速回到页面顶部。当设置overflow:auto属性后,元素容器会出现滚动条,即使页面滚动,backtop组件仍然可见且可点击,但点击后无法自动滚动到页面顶部。 这是由于设置overflow:auto属性后,元素容器会成为滚动容器,backtop组件失去自动滚动回到页面顶部的功能。 要解决此问题,可以通过以下方法实现backtop组件在设置overflow:auto属性后依然生效: 1. 自定义滚动事件:可以通过监听元素容器的滚动事件,在滚动到一定位置后,通过JavaScript代码修改滚动容器的scrollTop属性将页面滚动到顶部。 2. 使用其他滚动插件:要使backtop组件可以在设置overflow:auto属性后生效,可以考虑使用其他自定义滚动插件,例如BetterScroll、iScroll等。 3. 修改样式:可以对backtop组件进行一些样式上的调整,例如将backtop组件的z-index属性设置为较大的值,使其始终位于顶部,以便用户可以手动点击backtop组件返回顶部。 需要注意的是,以上方法只是一些可能的解决方案,根据具体情况可能需要进行一些适配和调试。如果以上方法仍然无法解决问题,建议查阅Element UI的相关文档或向官方提问以获取更准确的解答。 ### 回答3: 当设置一个元素的`overflow`属性为`auto`时,表示该元素会根据内容自动计算并显示滚动条,只有当内容超出元素的可见区域时才会出现滚动条。 而Element UI中的`Backtop`组件是用来实现返回页面顶部功能的,通常会设置一个目标元素,当滚动到目标元素时显示返回顶部按钮。但是当目标元素的父元素设置了`overflowauto`时,可能会导致`Backtop`组件不生效的情况。 这是因为当父元素设置了`overflowauto`时,滚动条是由父元素控制的,而不是网页的整个窗口。因此,即使滚动到目标元素所在的位置,父元素并不会触发滚动事件,导致`Backtop`组件无法捕捉到滚动事件。 解决这个问题的一种方法是将`Backtop`组件的目标元素的父元素设置为`body`元素,而不是设置在一个有`overflowauto`属性的元素内。这样可以保证`Backtop`组件能够监听到整个网页的滚动事件,并在需要时显示返回顶部按钮。 总之,当设置了`overflowauto`的元素时,可能会导致Element UI的`Backtop`组件失效。解决方法是将`Backtop`组件的目标元素的父元素设置为`body`元素。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值