items in char list now stop rendering out of view

public/script.js

@@ -107,7 +107,17 @@ import {
     setPoeOnlineStatus,
 } from "./scripts/poe.js";
 
-import { debounce, delay, restoreCaretPosition, saveCaretPosition, end_trim_to_sentence, countOccurrences, isOdd } from "./scripts/utils.js";
+import {
+    debounce,
+    delay,
+    restoreCaretPosition,
+    saveCaretPosition,
+    end_trim_to_sentence,
+    countOccurrences,
+    isOdd,
+    isElementInViewport,
+} from "./scripts/utils.js";
+
 import { extension_settings, loadExtensionSettings } from "./scripts/extensions.js";
 import { executeSlashCommands, getSlashCommandsHelp, registerSlashCommand } from "./scripts/slash-commands.js";
 import {
@@ -194,6 +204,7 @@ export {
     talkativeness_default,
     default_ch_mes,
     extension_prompt_types,
+    setCharListVisible,
 }
 
 // API OBJECT FOR EXTERNAL WIRING
@@ -791,6 +802,7 @@ function printCharacters() {
     printGroups();
     sortCharactersList();
     favsToHotswap();
+    setCharListVisible();
 }
 
 async function getCharacters() {
@@ -4755,6 +4767,33 @@ const swipe_right = () => {
     }
 }
 
+function setCharListVisible() {
+    const $children = $("#rm_print_characters_block").children();
+    $children.each(function () {
+        if (isElementInViewport($(this))) {
+            $(this)
+                //.css('opacity', 1);
+                //.css('display', 'flex');
+                .stop(true, false).animate({ opacity: 1 }, { duration: 50, queue: false });
+        }
+
+        if (!isElementInViewport($(this)) &&
+            ($(this).css('opacity') === '1' || $(this).css('opacity') === undefined)) {
+            //.css('opacity', 0);
+
+            $(this)
+                //.css('opacity', 0);
+                //.css('display', 'none');
+                .stop(true, false).animate({ opacity: 0 }, { duration: 50, queue: false });
+        };
+        /* console.log(`chid ${$(elem).find('.ch_name').text()}
+      inview? ${isElementInViewport($(elem))}
+      opacity? ${$(elem).css('opacity')}`
+
+    ); */
+    })
+}
+
 $(document).ready(function () {
 
 
@@ -5676,13 +5715,11 @@ $(document).ready(function () {
                         duration: 250,
                         easing: animation_easing,
                     });
-                    console.log('displayed AN panel');
 
                     if ($("#ANBlockToggle")
                         .siblings('.inline-drawer-content')
                         .css('display') !== 'block') {
                         $("#ANBlockToggle").click();
-                        console.log('opened AN box');
                     }
                 } else {
                     $("#floatingPrompt").transition({
@@ -5692,7 +5729,6 @@ $(document).ready(function () {
                     });
                     setTimeout(function () {
                         $("#floatingPrompt").hide();
-                        console.log('hid AN panel');
                     }, 250);
 
                 }
@@ -6153,6 +6189,24 @@ $(document).ready(function () {
         showSwipeButtons();
     });
 
+    setTimeout(function () {
+        const $children = $("#rm_print_characters_block").children();
+        const originalHeight = $children.length * $children.first().outerHeight();
+        $("#rm_print_characters_block").css('height', originalHeight);
+        //show and hide charlist divs on pageload (causes load lag)
+        //$children.each(function () { setCharListVisible($(this)) });
+
+        $("#rm_print_characters_block").on('scroll', debounce(function () {
+            const containerHeight = $children.length * $children.first().outerHeight();
+            $("#rm_print_characters_block").css('height', containerHeight);
+            //show and hide on scroll
+            setCharListVisible();
+        }, 1));
+        //delay timer to allow for charlist to populate, 
+        //should be set to an onload for rm_print_characters or windows?
+    }, 1000);
+
+
     $(document).on("click", ".mes_edit_delete", function () {
         if (!confirm("Are you sure you want to delete this message?")) {
             return;

public/scripts/power-user.js

@@ -8,6 +8,7 @@ import {
     reloadCurrentChat,
     getRequestHeaders,
     substituteParams,
+    setCharListVisible,
 } from "../script.js";
 import { favsToHotswap } from "./RossAscends-mods.js";
 import {
@@ -718,6 +719,7 @@ function sortCharactersList() {
     for (const item of array) {
         $(`${item.selector}[${item.attribute}="${item.id}"]`).css({ 'order': orderedList.indexOf(item) });
     }
+    setCharListVisible();
 }
 
 function sortGroupMembers(selector) {
@@ -882,7 +884,7 @@ $(document).ready(() => {
     // include newline is the child of trim sentences
     // if include newline is checked, trim sentences must be checked
     // if trim sentences is unchecked, include newline must be unchecked
-    $("#trim_sentences_checkbox").change(function() {
+    $("#trim_sentences_checkbox").change(function () {
         power_user.trim_sentences = !!$(this).prop("checked");
         if (!$(this).prop("checked")) {
             $("#include_newline_checkbox").prop("checked", false);
@@ -891,7 +893,7 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
-    $("#include_newline_checkbox").change(function() {
+    $("#include_newline_checkbox").change(function () {
         power_user.include_newline = !!$(this).prop("checked");
         if ($(this).prop("checked")) {
             $("#trim_sentences_checkbox").prop("checked", true);

public/scripts/utils.js

@@ -80,6 +80,19 @@ export function debounce(func, timeout = 300) {
     };
 }
 
+export function isElementInViewport(el) {
+    if (typeof jQuery === "function" && el instanceof jQuery) {
+        el = el[0];
+    }
+    var rect = el.getBoundingClientRect();
+    return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */
+    );
+}
+
 export function getUniqueName(name, exists) {
     let i = 1;
     let baseName = name;