oct16/TimeCat

页面滚动过快的话，页面底部按钮不显示

Jerry379 opened this issue · 4 comments

Jerry379 commented

有一个页面，上面都是文字，底部有一个确认按钮，当页面快速滚动到底部的时候点击确认按钮，播放的时候底部按钮不显示，请问这个问题怎么处理？

oct16 commented

能给一个具体Demo吗

Jerry379 commented

能给一个具体Demo吗

又试了一下，在微信里打开链接，录制时快速滑动到底部比较好复现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin:40px;
        }
    </style>
</head>
<body>
    <div>复制这段文字是页面边长复制这段文字是页面边长复制这段文字是页面边长</div>
    <button id="replay">播放</button>
    <script id="timecat" src="//cdn.jsdelivr.net/npm/timecatjs"></script>
    <script>
        const { Recorder } = TimeCat
        const recorder = new Recorder()
        const replayButton = document.getElementById('replay')
        if (replayButton) {
            setTimeout(() => {
                replayButton.className = ''
            }, 5000);
            replayButton.addEventListener('click', () => {
                if (replayButton.className) {
                    return
                }
                replayButton.className = 'hide'
                recorder.destroy()
                window.open('replay.html')
            })
        }
    </script>
</body>
</html>
Jerry379 commented

不好意思，我又查了一下原因，应该不是滚动过快的问题，是这样的，我是在移动端录制的视频，然后在pc端播放的，在移动端滚动区域的高度比较高是60000px,到pc端播放的时候可能是由于分辨率的问题，显示就成了63000px,就导致后面的3000px的区域无法显示出来，这种问题您有没有好的方法

cbbfcd commented

可否这样，通过 timecat 提供的 hook 拿到具体的高度，然后在 PC 端去用把滚动展示的盒子高度固定住