Text shifting when pali is displayed

[Reptilioo]

When the user goes from english-only to showing pali the text of the page is shifted, so if the user was trying to check a specific word in pali in the current paragraph he is reading, he is going to have to search again for that specific paragraph.

I was thinking about using an IntersectionObserver on every ".segment" so as to always know which ones are currently displayed and being able to use a similar function than scrollToHash() so as to scroll to the last displayed paragraphs before the user clicked on "Toggle Pali" button.

But I have never used an IntersectionObserver and I prefer to ask for insights about whether or not this might be too intensive for our app or if there might be better ways to do that, before implementing it.

Something like that to know which segments are displayed:

// Select every elements with class "segment"
const segments = document.querySelectorAll('.segment');

// Create object to keep segments displayed in viewport
var viewportEntries = {};

const intersectionCallback = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            //Add element if in viewport
            viewportEntries[entry.target.id] = entry.target;
        } else {
            //Delete element if not in viewport anymore
            delete viewportEntries[entry.target.id];
        }
    });
};

const observer = new IntersectionObserver(intersectionCallback, {
    root: null, // Use viewport as root
    rootMargin: '0px',
    threshold: 0.1
});

// Observe on each segment
segments.forEach(segment => {
    observer.observe(segment);
});

[ghost]

As a user of the app, it would be convenient to have this feature. As far as intensivity is concerned, my experience is that we tend to underestimate how efficient modern devices are. In saying that if you want to implement it we can do a quick profile of it and see how it goes.