Прокрутка HTML-страницы с помощью JavaScript? - PullRequest
Новая
       37

Прокрутка HTML-страницы с помощью JavaScript?

3 голосов
/ 23 октября 2009

Я создал страницу, которая прокручивалась через JavaScript, но в некоторых браузерах она не очень плавно прокручивается, когда вы и текст на страницу? И это, кажется, не работает вообще в Chrome.

Мой вопрос:
Каков наилучший метод для создания плавной прокрутки HTML-страниц с использованием JavaScript, который работает в кросс-браузерном режиме.

Чтобы понять, что я пытался сделать, вот тестовая страница, которую я сделал. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>test</title>
    <style type="text/css">
        html
        {
            overflow:hidden;
        }
        #fixedtop
        {
            padding:1%;
            position:fixed;
            float:left;
            vertical-align:middle;
        }
        table.scollTable td
    {
        background-color:Gray;
        height:12px;
        width:12px;
    }
    table.scollTable td:hover
    {
        background-color:Lime;
        height:20px;
        width:20px;
    }
        .container
        {
            background:url(http://sstatic.net/so/img/logo.png) repeat;
            height:5000px;
            width:5000px;
        }
    </style>
</head>
<body>
    <form name="form1" method="post" action="TestPage.aspx" id="form1">
<div>
</script>

    <div id="fixedtop">
        <table class="scollTable" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td onmouseover="scroll(-20,-20,this)"></td>
                <td onmouseover="scroll(-10,-20,this)"></td>
                <td onmouseover="scroll(0,-20,this)"></td>
                <td onmouseover="scroll(10,-20,this)"></td>
                <td onmouseover="scroll(20,-20,this)"></td>
            </tr>
            <tr>
                <td onmouseover="scroll(-20,-10,this)"></td>
                <td onmouseover="scroll(-10,-10,this)"></td>
                <td onmouseover="scroll(0,-10,this)"></td>
                <td onmouseover="scroll(10,-10,this)"></td>
                <td onmouseover="scroll(20,-10,this)"></td>
            </tr>
            <tr>
                <td onmouseover="scroll(-20,0,this)"></td>
                <td onmouseover="scroll(-10,0,this)"></td>
                <td></td>
                <td onmouseover="scroll(10,0,this)"></td>
                <td onmouseover="scroll(20,0,this)"></td>
            </tr>
            <tr>
                <td onmouseover="scroll(-10,10,this)"></td>
                <td onmouseover="scroll(-10,10,this)"></td>
                <td onmouseover="scroll(0,10,this)"></td>
                <td onmouseover="scroll(10,10,this)"></td>
                <td onmouseover="scroll(10,10,this)"></td>
            </tr>
            <tr>
                <td onmouseover="scroll(-20,20,this)"></td>
                <td onmouseover="scroll(-10,20,this)"></td>
                <td onmouseover="scroll(0,20,this)"></td>
                <td onmouseover="scroll(10,20,this)"></td>
                <td onmouseover="scroll(20,20,this)"></td>
            </tr>
        </table>
    </div>

    <div class="container"></div>
</form>
</body>
</html>
<script id="sTest" type="text/javascript" onload="test()"> 


    function scroll(x,y, elem) {
        var iScroll = setInterval(
        function() {
            SetScroll((x + GetXScroll()), (y + GetYScroll()))
        }, 1);
        elem.onmouseout = function() { clearInterval(iScroll) };
    }

    function GetYScroll() {
        return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
    }

    function GetXScroll() {
        return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
    }

    function SetScroll(x,y) {
        if (document.body.scrollTop) {
            document.body.scrollLeft = x;
            document.body.scrollTop = y;
        }
        if(document.documentElement){
            document.documentElement.scrollLeft = x;
            document.documentElement.scrollTop = y;
        }
        if (window.pageYOffset) {
            try {
                window.pageXOffset = x;
                window.pageYOffset = y;
            } catch (e) { }
        }
    }
</script>

Ответы [ 4 ]

0 голосов
/ 13 февраля 2010

Я бы порекомендовал проверить этот плагин: http://demos.flesler.com/jquery/scrollTo/, который написан для jQuery. На этой странице вы узнаете, на что она способна, но посмотрите документацию http://flesler.blogspot.com/2007/10/jqueryscrollto.html.

Причина, по которой я предлагаю также jQuery, заключается в том, что просто не существует лучшей библиотеки для упрощения и управления сложными задачами Javascript. Для этого вам буквально нужно сделать что-то вроде этого: 

$('#element').mouseover(function() {
    $(this).scrollTo(20);
});
0 голосов
/ 23 октября 2009

Попробуйте использовать window.scrollBy для выполнения прокрутки.

И я подкрепляю идею Эвана использовать библиотеку - без нее вы просто потеряете много времени. jQuery - это всего лишь один из вариантов, лучший выбор зависит от того, что вы делаете.

Еще одна вещь: я заметил, что вы пытались использовать XHTML. Помните, что Internet Explorer не способен отображать XHTML, когда все сделано правильно (включая заголовок HTTP и т. Д.). Я рекомендую придерживаться строгого HTML 4.01 до тех пор, пока не будут широко поддерживаться другие стандарты. Вы все равно не сможете использовать кросс-браузерные преимущества XHTML.

0 голосов
/ 29 декабря 2009

Посмотрите под капотом этой демонстрации. Это может дать вам несколько идей: xAnimation.scroll

0 голосов
/ 23 октября 2009

Рассмотрите возможность использования jQuery . Проверьте этот вопрос для получения дополнительной информации.

...