Programmatically scrolling a KTScroll
Is it possible to programmatically scroll a KTScroll to the top?
I'm getting the element as follows:
var scrollElement = document.getElementById("kt_modal_new_address_scroll");
var scrollObject = KTScroll.getInstance(scrollElement);But there does not seem to be a public method on the scrollObject to have it scroll to the top. Is it possible? If possible, I would prefer the programmatically triggered scrolling not to be animated.
Replies (11)
Hi,
You can use native API to scroll top:
var scrollElement = document.getElementById("kt_modal_new_address_scroll");
​scrollElement.scrollTop = 0;Regards.
I've tried that already but it does not work.
This is the element that I'm getting as scrollElement:
<div class="scroll-y me-n7 pe-7" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_new_address_header" data-kt-scroll-wrappers="#kt_modal_new_address_scroll" data-kt-scroll-offset="300px" >…</div>scrollElement.scrollTop = 0; doesn't do anything.
Do you have any idea what I might be missing?
Hi,
Do you have valid DOM object of the element ?
Is the id of the scrolling element set as "kt_modal_new_address_scroll" ?
Regards.
Yes I think so as console.log(scrollElement);
is producing the output above in the browser console.
Hi,
In your HTML code, I do not see the ID of the scrollable element.
Can you try to assign the ID to the scrollable element and the srctollTop should work as expected?
Regards.
I've renamed it and tried again. Still no scrolling.
Here's my code now:
var scrollElement = document.getElementById("kt_modal_add_person_scroll");
console.log(scrollElement);
scrollElement.style.background = "red";
scrollElement.scrollTop = 0;This is the console output:
<div class="scroll-y me-n7 pe-7" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_person_header" data-kt-scroll-wrappers="#kt_modal_add_person_scroll_x" data-kt-scroll-offset="300px" >…</div>The scrolling area is shown in red not (which I did just to make sure that I'm getting the correct element.
EDIT: Actually I'm not sure why but this forum does remove the id=... part of the snipped above.
Hi,
We just tested it and it worked well:
var scroll = document.querySelector("#kt_scroll_change_pos");
var btnTop = document.querySelector("#kt_scroll_change_pos_top");
var btnBottom = document.querySelector("#kt_scroll_change_pos_bottom");
btnTop.addEventListener("click", function (e) {
scroll.scrollTop = 0;
});
btnBottom.addEventListener("click", function (e) {
scroll.scrollTop = parseInt(scroll.scrollHeight);
});<div id_= "kt_scroll_change_pos" class="scroll pe-5 mb-10" data-kt-scroll="true" data-kt-scroll-height="{default: "100px", lg: "300px"}">........</div>Can you try your code outside the modal? In the content?
If you need any further help could you provide us with a test link?
Regards.
Thank you for testing. I think I know what the issue is now: when I add a scroll button like in your example, it is working fine.
What I was trying to do is scroll the modal when I gets shown. And I think that my scroll code is executing too early probably. How would you trigger a scrollTop = 0 just after the model is ready? Is there an event for that?
I have this issue because when the modal is shown the first time, then the users is scrolling down, dismisses it and does display it again, I want it to be at the scrollTop = 0 position. Maybe my approach to this is wrong and I should initialize it in a different way to always appear with scrollTop = 0?
Thanks for your support!
That is great and it is working fine. Thank you!
Please allow me one last question: would it be possible to achieve the same result without the scroll action being visible (as it is after shown.bs.modal)? I mean in way so that the modal opens already scrolled to the top?
Hi,
Great! Glad to hear that. Can you try to use show.bs.modal to execute it from the modal shown.
Regard.
