Question

这是一个MVC 3剃刀视图引擎项目...我有一个通知窗口，在页面加载时自动滚动到底部..这在屏幕上显示为局部视图..问题是，当发生这种情况时整个屏幕滚动到底部而不仅仅是部分屏幕...我已经在这里使用了这个并且无法获得仅部分视图滚动到底部......

我在父页面的底部使用此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>

Debug Message

Answer 1

通过将行document.body.scrollTop = document.documentElement.scrollTop = 0;更改为

来解决此问题

document.scrollTop = 0;

也许这会帮助遇到同样问题的其他人......

Javascript不会将整个屏幕滚动到顶部

1 个答案: