これは 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>