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_uptime = '<div id="info_js__float__uptime"></div>';
|
||||
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 = `\
|
||||
<article id="chat-users_js">
|
||||
<h5 id="chat-users_js__watching-header"></h5>
|
||||
|
@ -692,11 +694,13 @@ const on_websocket_message = (event) => {
|
|||
case "message":
|
||||
console.log("ws message", receipt);
|
||||
create_and_add_chat_message(receipt.message);
|
||||
if (chat_messages.dataset.scrollLock === undefined) {
|
||||
chat_messages.scrollTo({
|
||||
left: 0,
|
||||
top: chat_messages.scrollTopMax,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
break;
|
||||
|
||||
case "set-users":
|
||||
|
@ -866,7 +870,20 @@ const peg_bottom = (entries) => {
|
|||
}
|
||||
const resize = new ResizeObserver(peg_bottom);
|
||||
resize.observe(chat_messages);
|
||||
track_scroll(chat_messages);
|
||||
|
||||
/* chat scroll lock */
|
||||
chat_messages.addEventListener("scroll", (event) => {
|
||||
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;
|
||||
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 {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
読み込み中…
新しいイシューから参照