I've seen quite a few old posts with similar issues but haven't been able to quite find a solution that works for me. In my blazor server project I have a script that should scroll a div inside a component on pages. (timeline of events). This div should scroll on load (to bottom of items). Now if the timelone is not in view when it loads (lower down on page, this is by design) it would also bring the div into view (scroll the page down), where I only want the div to scroll to the bottom. This is what I currently use. What's the easiest way to only make the div scroll, and not the page even if the div isn't visible?
The reason I also specify an item in my script is that if events happen higher up (event status changes, etc) then it requires view, so it would scroll up to get to the item of focus. On page load, I would just specify the index of the last item.
<script>
function ListViewScroll(args) {
let div = document.getElementById('lstTimeLine');
div.querySelector('[data-uid="' + args.id + '"]').scrollIntoView({ behavior: 'smooth' });
}
</script>
Thanks so much for help in advance.
To Mister Magoo's point, This is what worked for me:
function ScrollTimelineToBottom() {
let div = document.getElementById('lstTimeLine');
div.scrollTop = div.scrollHeight;
} ;
Sorry for the dup post.
You should use his css style in your page, so that your page do not have scrollbars and also do not scroll
html, body
{
overflow-y: hidden;
}