使用 jQuery 动画的 div 滚动

Question

我正在尝试为 youtube 播放器创建自己的“字幕”系统。目前我坚持使用无法正常工作的 js 滚动。

代码：

    <script type="text/javascript" language="javascript">
    var player;
    var scrollToTimePosition;
    // document.onReady
    $(document).ready(function() {
        var id = "QH2-TGUlwu4";
        var params = { allowScriptAccess: "always" };
        swfobject.embedSWF("http://www.youtube.com/v/" + id + "?enablejsapi=1", "video-container", "500", "375", "8", null, null, params, null);
    });

    // YouTube API Required function
    function onYouTubePlayerReady() {
        player = document.getElementById("video-container");
        //player.playVideo();

        setInterval(function() {
            if(player.getPlayerState() == 1) {
                var time = Math.round(player.getCurrentTime());
                if(time > 1 && scrollToTimePosition != time) {
                    var anchor = $("#text-container > a[href=#"+time+"]");
                    if(anchor.length) {
                        scrollToTimePosition = time;
                        $('#text-container').animate({
                            scrollTop: anchor.offset().top - $("#text-container").offset().top
                        }, 1000);
                    }
                }
            }
        }, 500);
    }
</script>

你可以在网上看到它here（抱歉页面上的俄语）。在 Google Chrome 浏览器中，它有时会上下跳跃，并停在错误的位置。当滚动条已经滚动到某个位置并且下一个也部分可见时会发生这种情况。

UDP.：我添加了控制台日志以便于调试，日志如下所示：

Move to #33 with shift 204px
Move to #43 with shift 219px
Move to #46 with shift 261px
Move to #53 with shift 438px
Move to #60 with shift 480px
Move to #63 with shift 657px
Move to #65 with shift 915px

Answer 1

我自己解决了这个问题。关键是动画滚动使用到页面顶部的绝对距离，所以到每个元素的距离是： D = 从顶部到可滚动容器的距离（在我的情况下为 div）+ 从容器顶部到元素的距离； 而且这个值是静态的，所以在女巫位置滚动条中没有关系，距离应该预先计算并固定。

新代码：

<script type="text/javascript" language="javascript">
    // document.onReady
    $(document).ready(function() {
        var id = "QH2-TGUlwu4";
        var params = { allowScriptAccess: "always" };
        swfobject.embedSWF("http://www.youtube.com/v/" + id + "?enablejsapi=1", "video-container", "500", "375", "8", null, null, params, null);
    });

    /**
     * Creates auto-scrollable div based on YouTube video player current time.
     *
     * Div is scrolled to link anchor, that keeps a timestamp in a href value, which will be used as scroll target.
     * Example of anchors:
     * <a href="#1">0:01</a>
     * <a href="#31">0:31</a>
     * <a href="#71">1:11</a>
     *
     * @author Andrew Dryga <http://go.dryga.com/email>
     * @param playerContainerSelector Selector for video container (element that holds player)
     * @param scrollableContainerSelector Selector for scrollable container (for ex. div with overflow-y: scroll)
     */
    var YouTubeAutoScrolledSubtitles = function(playerContainerSelector, scrollableContainerSelector) {
        // Link to player container
        var player = $(playerContainerSelector).get(0);
        // Selector for continer that will be scrolled
        var containerSelector = scrollableContainerSelector;
        // Link to continer that will be scrolled
        var container = $(containerSelector);
        // Sive current point to dont call scroll several times
        var scrollToTimePosition;

        // This function scrolls container to current position
        var scroller = function() {
            var time = Math.round(player.getCurrentTime());

            if(time > 0 && scrollToTimePosition != time) {
                var anchor = $(containerSelector + " > a[href=#"+time+"]"); // FIXME
                if(anchor.length) {
                    scrollToTimePosition = time;
                    container.animate({
                        scrollTop: anchor.data('absoluteDistanceFromTop') - container.offset().top + 3
                    }, 1000);
                }
            }
        }

        // Preparing data for scroll, savind absolute anchors position from top
        var prepareAnchors = function() {
            $(containerSelector + " > a").each(function() {
                $(this).data('absoluteDistanceFromTop', $(this).offset().top);
            });
        };

        // Start scrolling
        var scroll = function () {
            var scrollerInterval = setInterval(function() {
                if(player.getPlayerState() == 1) {
                    scroller();
                }
            }, 500);
        }

        // Starting scroller 
        prepareAnchors();
        // Start scroll
        scroll();

    };

    // YouTube API Required function
    function onYouTubePlayerReady() {
        YouTubeAutoScrolledSubtitles("#video-container", "#text-container");
    }
</script>

内容部分可以是这样的：

<div id="video-container"></div>
<div id="text-container">
    <a href="#1">0:01</a>
    <div>Block 1</div>

    <a href="#5">0:05</a>
    <div>Block 2</div>
</div>

请不要忘记版权，享受！