java实现滚动弹幕实验总结_直播弹幕滚动列表效果实现

pc版快手、移动端b站弹幕列表效果实现效果如下：

效果描述：页面上部为直播视频播放器，下半部分是弹幕列表，ui效果类似b站app分享出去的h5直播间，要实现的效果，当弹幕滚动到最底部的时候，新来的的弹幕会自动往上顶，如果向下滑动去看历史弹幕列表新来的弹幕则停止往上顶，然后左下角会出现新消息提示，当点击新消息提示则滚动到最底端新消息提示消失，或者手动滚动到最底端消息提示消失

难点：手动滚动到最底部新消失提示消失(因为要监听scroll事件并在其中获取dom元素尺寸)

误区：刚开始开发中，我的想法是弹幕列表最多存储 150 条数据，如果超出则新push一个，顶部就shift一个，这样有一个问题就是scroll事件是会不断的触发，在观察完pc端快手直播的弹幕列表，发现其大概原理是超出150条，则将前50条一次性去除，这样 scroll仅仅只会触发一次，再加上防抖操作，监听scroll事件的开销就很小了具体代码如下：/**

* h5 直播间弹幕列表组件

*

* 使用方式

* {liveInfo.danmuChannel && this.danmuRef = ref} wrapH={DANMUWRAPH}/> }

* 父组件socket拿到数据通过组件 ref 实例调用 addDanmu(data)