mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
refactor(slash-commands): 优化消息定位和滚动效果
This commit is contained in:
@ -2161,14 +2161,22 @@ export function initDefaultSlashCommands() {
|
|||||||
// --- End of loading step ---
|
// --- End of loading step ---
|
||||||
|
|
||||||
const messageElement = document.querySelector(`[mesid="${floorIndex}"]`);
|
const messageElement = document.querySelector(`[mesid="${floorIndex}"]`);
|
||||||
|
const chatContainer = document.getElementById('chat');
|
||||||
|
|
||||||
if (messageElement) {
|
if (messageElement && chatContainer) {
|
||||||
// --- Corrected: Use the actual class from the template ---
|
|
||||||
const headerElement = messageElement.querySelector('.ch_name');
|
const headerElement = messageElement.querySelector('.ch_name');
|
||||||
const elementToScroll = headerElement || messageElement; // Fallback to the entire message div
|
const elementToScroll = headerElement || messageElement; // Fallback to the entire message div
|
||||||
const blockPosition = headerElement ? 'center' : 'start';
|
|
||||||
|
|
||||||
elementToScroll.scrollIntoView({ behavior: 'smooth', block: blockPosition });
|
// Calculate position relative to chat container
|
||||||
|
const elementRect = elementToScroll.getBoundingClientRect();
|
||||||
|
const containerRect = chatContainer.getBoundingClientRect();
|
||||||
|
const scrollPosition = elementRect.top - containerRect.top + chatContainer.scrollTop;
|
||||||
|
|
||||||
|
const viewportOffset = chatContainer.clientHeight * 0.1; // 25% from top
|
||||||
|
chatContainer.scrollTo({
|
||||||
|
top: scrollPosition - viewportOffset,
|
||||||
|
behavior: 'smooth',
|
||||||
|
});
|
||||||
|
|
||||||
// Highlight the message element
|
// Highlight the message element
|
||||||
if (messageElement instanceof HTMLElement) {
|
if (messageElement instanceof HTMLElement) {
|
||||||
@ -2183,12 +2191,9 @@ export function initDefaultSlashCommands() {
|
|||||||
messageElement.style.backgroundColor = ''; // Remove highlight
|
messageElement.style.backgroundColor = ''; // Remove highlight
|
||||||
}, 1500); // Match flash duration
|
}, 1500); // Match flash duration
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
console.warn('Message element is not an HTMLElement, cannot flash highlight.');
|
console.warn('Message element is not an HTMLElement, cannot flash highlight.');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
// Only warn if element is not found *after* attempting to load all messages
|
// Only warn if element is not found *after* attempting to load all messages
|
||||||
toastr.warning(`Could not find element for message ${floorIndex} (using [mesid="${floorIndex}"]) even after attempting to load all messages. It might not be rendered yet or the index is invalid.`);
|
toastr.warning(`Could not find element for message ${floorIndex} (using [mesid="${floorIndex}"]) even after attempting to load all messages. It might not be rendered yet or the index is invalid.`);
|
||||||
|
Reference in New Issue
Block a user