Автоматическая прокрутка к последнему сообщению
Добрый вечер!
Обращаюсь с вопросом "Как сделать автоматическую прокрутку содержимого к последнему сообщению в блоке со скроллбаром?". Речь идёт о чате. Нужно сделать так, чтобы присутствовала возможность прокрутки содержимого, но при этом, когда появляются новые сообщения, чтобы чат прокручивался автоматически к ним и оставался в таком положении.
Проблема заключается в том, что до добавления прокрутки через overflow-y, чат прокручивался к последнему сообщению сам, но с добавлением скроллбара прокрутка перестала работать. Возможно, я что-то не туда вписываю.. Помогите, пожалуйста, разобраться.
Чат
Код:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="BybonukChatDark/BybonukChatDark.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<script>
function scrollToBottom()
{
document.body.scrollTop = document.body.scrollHeight;
}
function onStatisticReceived( service, value )
{
}
function onNewMessage( service, nickName, message, type )
{
var serviceElem = document.createElement( "img" );
serviceElem.className = service;
var serviceBlock = document.createElement( "div" );
serviceBlock.className = "service";
serviceBlock.appendChild( serviceElem );
var nickBlock = document.createElement( "div" );
nickBlock.className = "nick";
nickBlock.innerHTML = nickName;
if (nickName == "teseckiy.alexan")
nickBlock.style.color = "#dcba00"; // Стример на GG
if (nickName == "bybonuk")
nickBlock.style.color = "#dcba00"; // Стример на Twitch
if (nickName == "im.tanya.fox")
nickBlock.style.color = "#3bc2aa"; // Таня на GG
if (nickName == "tanyafox")
nickBlock.style.color = "#3bc2aa"; // Таня на Twitch
if (nickName == "Dolka")
nickBlock.style.color = "#9e29c9"; // Долька на GG
if (nickName == "dolka23")
nickBlock.style.color = "#9e29c9"; // Долька на Twitch
var headerkBlock = document.createElement( "div" );
headerkBlock.className = "header";
headerkBlock.appendChild( serviceBlock );
headerkBlock.appendChild( nickBlock );
var messageBlock = document.createElement( "div" );
messageBlock.className = "message";
messageBlock.innerHTML = message;
var messageBox = document.createElement( "div" );
messageBox.className = "messagebox";
messageBox.appendChild( headerkBlock );
messageBox.appendChild( messageBlock );
var messageType = document.createElement( "div" );
messageType.className = type;
messageType.appendChild( messageBox );
var messagesList = document.getElementById( "messagesList" );
if( type != "" )
{
messagesList.appendChild( messageType );
scrollToBottom();
}
else
{
messagesList.appendChild( messageBox );
}
scrollToBottom();
}
</script>
<body>
<div id="knopka"><button>Street magic</button></div><br><br>
<div id="messagesList"></div>
<script>
setInterval( scrollToBottom, 500 );
</script>
<script>
$( "button" ).click(function() {
$( "#messagesList" ).empty();
});
</script>
<!--START_BROWSER_CODE-->
<script>
var wsUri = "ws://localhost:15619";
var websocket = null;
function initWebSocket()
{
try
{
if (typeof MozWebSocket == 'function')
webSocket = MozWebSocket;
if ( websocket && websocket.readyState == 1 )
websocket.close();
websocket = new WebSocket( wsUri );
websocket.onopen = function (event)
{
console.log( 'initWebSocket:open' );
};
websocket.onclose = function (event)
{
setTimeout( initWebSocket, 3000 );
};
websocket.onerror = function (event)
{
websocket.close();
};
websocket.onmessage = function (event)
{
var newMessage = JSON.parse( event.data );
onNewMessage( newMessage.service, newMessage.nick, newMessage.message, newMessage.type );
document.body.scrollTop = document.body.scrollHeight;
};
}
catch (exception)
{
}
}
initWebSocket();
setInterval(function() { document.body.scrollTop = document.body.scrollHeight; }, 500 );
</script>
<!--END_BROWSER_CODE-->
</body>
</html>
Стиль
Код:
@font-face {
font-family: themeFont;
src: url(fritz_quadrata_cyrillic.ttf);
}
@-webkit-keyframes scaleAnim
{
from{ -webkit-transform: scale(0); }
75%{ -webkit-transform: scale(1.2);
}
to{ -webkit-transform: scale(1); }
}
html
{
overflow: hidden;
}
body
{
background-color: transparent;
padding: 0px;
margin: 0px;
}
a
{ color: #dcba00;}
#messagesList
{
overflow-y: scroll;
height: 400px;
}
.alias .messagebox .message
{
color: #FF9C00;
}
.ignore .messagebox
{
}
.support .messagebox
{
}
.messagebox
{
border-radius: 5px;
border: 2px solid rgba( 0, 0, 0, .75
);
background-color: rgba( 26, 26, 26,
0.7 );
/*font-family: themeFont,'Trebuchet
MS';*/
font-family: 'Trebuchet MS';
font-size: 16px;
margin-left: calc( 10% - 2px );
margin-right: calc( 10% - 2px );
margin-bottom: 8px;
width: 80%;
text-align: left;
-webkit-animation: scaleAnim 0.5s;
}
.header
{
float: left;
width: 100%;
font-size: 12px;
padding-top: 2px;
padding-bottom: 2px;
}
.message
{
clear: both;
color: rgb( 185, 185, 185 );
line-height: 1;
background-color: rgba(32, 32, 32,
1);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding: 3px 8px 5px 8px;
}
.service
{
float: right;
margin-right: 8px;
}
.nick
{
float: left;
color: rgba( 140, 140, 140, 1 );
text-transform: uppercase;
margin-left: 8px;
font-size: 14px;
}
.smile
{
height: 32px;
}
.picture
{
max-height: 150px;
max-width: 100%;
}
#knopka {
display: inline;
height: 38px;
width: 100%;
position: absolute;
background: black;
}
button {
border-radius: 5px;
border: none;
background-color: #202020;
color: #919191;
font-family: themeFont;
src: url(fritz_quadrata_cyrillic.ttf);
padding: 5px 15px;
margin-top: 5px;
margin-left: 32%;
position:fixed;
}
.goodgame
{
content: url
(../resources/goodgamelogo1.png);
height: 10px;
}
.twitch
{
content: url
(../resources/twitchlogo1.png);
height: 12px;
}
|