Div прокрутки с JQuery анимировать - PullRequest
Новая
       14

Div прокрутки с JQuery анимировать

3 голосов
/ 17 ноября 2011

Я пытаюсь создать свою собственную систему "субтитров" для игрока на 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>

Вы можете увидеть его онлайн здесь (извините за русский язык на странице).В браузере 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

1 Ответ

1 голос
/ 17 ноября 2011

Я исправил это сам. Дело в том, что анимация прокручивается с использованием абсолютного расстояния от верхней части страницы, поэтому расстояние до каждого элемента: 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>

Пожалуйста, не забывайте об авторских правах, наслаждайтесь!

...