Lock js chat scroll when not at bottom
このコミットが含まれているのは:
コミット
73824f70d7
|
@ -18,7 +18,9 @@ const jsmarkup_info_float_button = '<button id="info_js__float__button">Reload s
|
||||||
const jsmarkup_info_float_viewership = '<div id="info_js__float__viewership"></div>';
|
const jsmarkup_info_float_viewership = '<div id="info_js__float__viewership"></div>';
|
||||||
const jsmarkup_info_float_uptime = '<div id="info_js__float__uptime"></div>';
|
const jsmarkup_info_float_uptime = '<div id="info_js__float__uptime"></div>';
|
||||||
const jsmarkup_info_title = '<header id="info_js__title"></header>';
|
const jsmarkup_info_title = '<header id="info_js__title"></header>';
|
||||||
const jsmarkup_chat_messages = '<ol id="chat-messages_js" data-js="true"></ol>';
|
const jsmarkup_chat_messages = `\
|
||||||
|
<ol id="chat-messages_js" data-js="true"></ol>
|
||||||
|
<button id="chat-messages-unlock">Chat scroll paused. Click to resume.</button>`;
|
||||||
const jsmarkup_chat_users = `\
|
const jsmarkup_chat_users = `\
|
||||||
<article id="chat-users_js">
|
<article id="chat-users_js">
|
||||||
<h5 id="chat-users_js__watching-header"></h5>
|
<h5 id="chat-users_js__watching-header"></h5>
|
||||||
|
@ -692,11 +694,13 @@ const on_websocket_message = (event) => {
|
||||||
case "message":
|
case "message":
|
||||||
console.log("ws message", receipt);
|
console.log("ws message", receipt);
|
||||||
create_and_add_chat_message(receipt.message);
|
create_and_add_chat_message(receipt.message);
|
||||||
chat_messages.scrollTo({
|
if (chat_messages.dataset.scrollLock === undefined) {
|
||||||
left: 0,
|
chat_messages.scrollTo({
|
||||||
top: chat_messages.scrollTopMax,
|
left: 0,
|
||||||
behavior: "smooth",
|
top: chat_messages.scrollTopMax,
|
||||||
});
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "set-users":
|
case "set-users":
|
||||||
|
@ -866,7 +870,20 @@ const peg_bottom = (entries) => {
|
||||||
}
|
}
|
||||||
const resize = new ResizeObserver(peg_bottom);
|
const resize = new ResizeObserver(peg_bottom);
|
||||||
resize.observe(chat_messages);
|
resize.observe(chat_messages);
|
||||||
|
track_scroll(chat_messages);
|
||||||
|
|
||||||
|
/* chat scroll lock */
|
||||||
chat_messages.addEventListener("scroll", (event) => {
|
chat_messages.addEventListener("scroll", (event) => {
|
||||||
track_scroll(chat_messages);
|
track_scroll(chat_messages);
|
||||||
|
const scroll = chat_messages.scrollTopMax - chat_messages.scrollTop;
|
||||||
|
const locked = chat_messages.dataset.scrollLock !== undefined
|
||||||
|
if (scroll >= 160 && !locked) {
|
||||||
|
chat_messages.dataset.scrollLock = "";
|
||||||
|
} else if (scroll == 0 && locked) {
|
||||||
|
chat_messages.removeAttribute("data-scroll-lock");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const chat_messages_unlock = document.getElementById("chat-messages-unlock");
|
||||||
|
chat_messages_unlock.addEventListener("click", (event) => {
|
||||||
|
chat_messages.scrollTop = chat_messages.scrollTopMax;
|
||||||
});
|
});
|
||||||
track_scroll(chat_messages);
|
|
||||||
|
|
|
@ -180,6 +180,28 @@ noscript {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
font-size: 11pt;
|
font-size: 11pt;
|
||||||
}
|
}
|
||||||
|
#chat-messages_js:not([data-scroll-lock]) + #chat-messages-unlock {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#chat-messages-unlock {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1rem;
|
||||||
|
color: inherit;
|
||||||
|
font-size: 10pt;
|
||||||
|
text-align: center;
|
||||||
|
width: calc(100% - 4rem);
|
||||||
|
margin: 0 2rem;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #316aaf;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px outset #4c91e6;
|
||||||
|
box-shadow: 0 0 3px #4c91e6;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#chat-messages-unlock:hover {
|
||||||
|
background-color: #3674bf;
|
||||||
|
}
|
||||||
#chat-messages_nojs {
|
#chat-messages_nojs {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
読み込み中…
新しいイシューから参照