3

JavaScriptを介してスクロールするページを作成しましたが、一部のブラウザーでは、ページにテキストを送信したときにスムーズにスクロールしませんか？そして、それはクロムではまったく機能しないようです。

私の質問は
、クロスブラウザで動作するJavaScriptを使用してスムーズにスクロールするHTMLページを作成するための最良の方法は何ですか。

私が何をしようとしていたかを知るために、これが私が作成したテストページです。

<!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

4 に答える 4

0

このデモの内部を見てください。それはあなたにいくつかのアイデアを与えるかもしれません： xAnimation.scroll

于 2009-12-29T15:44:34.477 に答える
0

window.scrollByを使用してスクロールしてみてください。

また、ライブラリを使用するという Evan のアイデアに賛成です。ライブラリがないと、多くの時間を失うことになります。jQuery は 1 つのオプションにすぎません。最善の選択は、何をしているかによって異なります。

もう 1 つ: XHTML を使用しようとしていることに気付きました。XHTML が正しく表示された場合、Internet Explorer は(HTTP ヘッダーなどを含めて) 表示できないことに注意してください。他の標準が広くサポートされるまで、厳密な HTML 4.01 を使用することをお勧めします。とにかく、XHTML の利点であるクロスブラウザーを使用することはできません。

于 2009-10-22T22:28:26.713 に答える
0

このプラグインをチェックすることをお勧めします: http://demos.flesler.com/jquery/scrollTo/ jQuery用に書かれています。そのページで何ができるかがわかりますが、ドキュメントについてはhttp://flesler.blogspot.com/2007/10/jqueryscrollto.htmlをチェックしてください。

私が jQuery も提案する理由は、複雑な Javascript タスクを簡単かつ管理しやすくするための優れたライブラリーがないからです。このタスクでは、文字通り次のようなことをする必要があります。

$('#element').mouseover(function() {
    $(this).scrollTo(20);
});
于 2010-02-13T01:21:35.823 に答える
-1

jQueryの使用を検討してください。詳細については、この質問を確認してください。

于 2009-10-22T20:44:14.133 に答える