-3

これは MVC 3 Razor View Engine プロジェクトです...ページの読み込み時に自動的に下部にスクロールする通知ウィンドウがあります..これは画面に部分的なビューとして表示されます..問題は、これが発生すると画面全体が表示されることです部分的な画面だけでなく、一番下までスクロールします...私はこれと輪になっていて、部分的なビューだけを一番下までスクロールすることはできません...

親ページの下部でこのJavaScriptを使用して、強制的に上部にスクロールしようとしていますが、役に立ちません...<script language="javascript" type="text/javascript"> document.body.scrollTop = document.documentElement.scrollTop = 0; </script>

これは親ビューのサンプルです:

@Code
ViewData("Title") = "Testing Area"
End Code
<link rel="Stylesheet" type="text/css"    href="@Url.Content("~/Content/pro_drop/pro_drop_1.css")" />
<script src="@Url.Content("~/Content/pro_drop/stuHover.js")" type="text/javascript">                      </script>
<script type="text/javascript">

<script language="javascript" type="text/javascript">
var int = self.setInterval(function () { clock() }, 1000);
function clock() {
    $.ajax({
        url: '@Url.Action("currentUsers", "Admin")',
        type: "GET",
        success: function (result) {
            $("#CurrUsers").html(result);
        }
    });
}
</script>
<fieldset>

<table style="border-style: hidden; vertical-align: top">
    <tr>
        <td>
            <table style="border-style: hidden; vertical-align: top">
                <tr>
                    <td>
                        <div id="CurrUsers" style="font-size: x-small">
                            @Html.Partial("_CurrentUsers", ViewBag.UserListOnline)
                        </div>
                    </td>

                </tr>
            </table>
        </td>

    </tr>
    <tr>
        <td style="border-style: hidden; vertical-align: top">
            <table style="border-style: hidden;">
                <tr>
                    <td>
                        <div id="chatter">
                            @Html.Partial("ChatScreen", ViewBag.ClientName)
                        </div>
                    </td>
                </tr>

            </table>
        </td>
       </tr>
     </table>

<script language="javascript" type="text/javascript">
    document.body.scrollTop = document.documentElement.scrollTop = 0;
</script>
</fieldset>

そして、次の@Html.Partial("ChatScreen", ViewBag.ClientName)ようになります。

<script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.signalR-0.5.3.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/signalR/hubs")" type="text/javascript"></script>
<style>
    div.rectangular-area
    {
        border: 1px solid #999;
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 10px;
        background-color: #EEE;
        max-height: 240px;
        width: 500px;
        overflow : scroll;
       }
 </style>
 @code
    Dim xList As List(Of String) = ViewBag.msgHist
 End Code

 <div style="width:auto;height:400px">

 <script type="text/javascript">
 $(function () {

    var chat = $.connection.chat;
    var myClientName = '@ViewBag.ClientName';
    var autoScroll = true;
    if (autoScroll) {
        $('#messages').animate({ scrollTop: $('#messages').prop('scrollHeight') })
    };


    chat.GetMessage = function (myClientName, message) {
        $('#CheckinEvents').append('<br>' + myClientName + ' : ' + message);
        if (autoScroll) {
            $('#CheckinEvents').animate({ scrollTop: $('#CheckinEvents').prop('scrollHeight') })
        }
    };

    $('#msg').keydown(function (e) {
        if (e.which == 13) { //Enter
            e.preventDefault();
            chat.send(myClientName, $('#msg').val());
            $('#msg').val('');
        }
    });

    chat.addMessage = function (myClientName, message) {
        if (myClientName.indexOf("System") != -1) {
        $('#messages').append('<br><b style="color:red">'+ myClientName + message + '</b>');
        }

        else
        {
        $('#messages').append('<br>' + myClientName + ' : '+ '<b style="color:#000000">'  + message);
                    }

        if (autoScroll) {
            $('#messages').animate({ scrollTop: $('#messages').prop('scrollHeight') })
        }
    };

    $("#broadcast").click(function () {
        // Call the chat method on the server
        chat.send($('#msg').val());
    });

    // Start the connection
    $.connection.hub.start();
});
</script>

<div id="MessagingDiv" class="rectangular-area" style="width:600px" >
   Notify all Admin:
<input type="text" id="msg" style="width: 575px;" maxlength="128" />
</div>

<div id="messages" class="rectangular-area" style="text-align: left; width: 600px;">
<h3>
    Latest received events:
</h3>
@For Each item In xList
   If item.Contains("System Message") Then
       @<br />@<b style="color: Red">@item.Split("-")(0)  - <b style="color: Black">@item.Split("-")(1) : <b style="color: #8B6508">@item.Split("-")(3)</b></b> </b>
   Else
        @<br />@<b style="color:#00CDCD">@item.Split("-")(0) <b style="color: #FFA54F">(@item.Split("-")(1)) <b style="color:Black"> : @item.Split("-")(2)</b></b></b>
   End If
Next
</div>

</div>

デバッグ メッセージ

4

1 に答える 1

0

document.body.scrollTop = document.documentElement.scrollTop = 0;これは、行を次のように変更することで修正されました

document.scrollTop = 0;

たぶん、これは同じ問題に遭遇した他の誰かを助けるでしょう...

于 2013-03-16T22:10:10.417 に答える