EasyDSS视频直播列表页面横向滚动条和纵向滚动条不能同步的问题优化

EasyDSS 4.0.0测试版引入了横向和纵向滚动条,但在测试中发现两者无法同步。问题源于表格未设置高度,导致滚动不便。通过为表格设置最大高度并根据窗口大小动态调整,解决了滚动条同步问题,提升了用户体验。EasyDSS作为互联网视频云服务,支持多种播放协议,广泛应用于直播、点播场景。

目前我们官网EasyDSS最新的测试版本为3.3.0,而现在新版4.0.0已经在测试当中了,测试期间会将一些存在的问题进行修复,同时对体验不太好的地方进行优化。

EasyDSS4.0.0的版本在视频直播列表当中插入了横向和纵向的滚动条,但是测试期间发现两个滚动条的频率难以同步,需要把纵向滚动条拖到底部才能拖动横向滚动条,修改数据后数据会在表格顶部,操作的时候需要来回拖动,给使用带来了不便。

image.png

通过对前端代码的检查,我们得知出现问题的原因是当前表格未设置高度,纵向滚动条是父级盒子设置的,需要给表格设置高度才能显示纵向滚动条。

因此我们要给表格添加最大高度

:max-height="tableHeight"

在页面加载前获取当前窗口高度减去顶部导航和页脚并赋值

this.tableHeight = document.documentElement.clientHeight - 400

解决效果如下,表格高度随窗口高度变化而变化:

image.png

EasyDSS互联网视频云服务支持HTTP、HLS、RTMP等播放协议,可面向Windows、Android、iOS、Mac等终端提供稳定流畅的直播、点播、时移、回看服务,广泛应用到互联网教学、互联网电视、IPTV、VOD、视频聊天和各种互联网直播/点播,欢迎大家测试了解。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值