使用 jQuery 动画的 div 滚动

Posted 2023-05-08

【中文标题】使用 jQuery 动画的 div 滚动

【英文标题】：Div scroll with jQuery animate

【发布时间】：2011-12-30 23:59:43

【问题描述】：

我正在尝试为 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

【问题讨论】：

有点与您的问题无关，但是当用户在视频中向前跳过时会发生什么？

该脚本在向前跳过时工作正常，因为间隔每 500 毫秒检查一次当前视频时间位置，我还想指出到目前为止不错的脚本。以前真的没有见过这样的东西。

@MeisamMulla，效果很好。当您向前跳过视频时，它会继续播放到下一个滚动点，然后字幕滚动到正确的位置。我想通过立即自动滚动到最近的位置来改善这一点。

【参考方案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>

请不要忘记版权，享受！