I’m working on a page where a button press in a potentially long list leads to the display of a form field higher up on the page. I would like to have the button press trigger a “scroll to element” action. Anyone do this successfully on WeWeb?
2 Likes
@kyanaloe There are several options. They all involve a bit of Javascript. You can use these in the custom javascript action.
The two that I landed on after much research are these:
OPTION 1:
let e = document.getElementById("submit-content");
e.scrollIntoView({
block: 'start',
behavior: 'smooth',
inline: 'start'
});
OPTION 2
const node = document.getElementById("submit-content");
const yourHeight = 120; //This is how far down the page you need the element to scroll to. Relevant primarily if you have a sticky horizontal navigation/header.
node.scrollIntoView(true);
const scrolledY = window.scrollY;
if (scrolledY) {
window.scroll(0, scrolledY - yourHeight);
}
Option 1 has smooth scrolling. Option 2 is a hard scroll, but option 2 apparently has more cross browser acceptance.
I’m using option 2 in my project.
4 Likes
If you add html{scroll-behavior: smooth;} in your global css you get the smoot scroll behaviour with option 2 as well keeping a high cross browser compatibility
7 Likes
Amazing! Thank you!
1 Like
If I use Option 2 I get following error: “TypeError: Cannot read properties of null (reading ‘scrollIntoView’)”
I gave my element an id and referenced it like below. Any help is appreciated!!
const node = document.getElementById("message-container");
const yourHeight = 120; //This is how far down the page you need the element to scroll to. Relevant primarily if you have a sticky horizontal navigation/header.
node.scrollIntoView(true);
const scrolledY = window.scrollY;
if (scrolledY) {
window.scroll(0, scrolledY - yourHeight);
}```const node = wwLib.getFrontDocument().getElementById("message-container");
3 Likes
Awesome!! Now it works!
Can you help me guys 
, I need to have scroll feature not for the whole window/screen but for the specific list /collection of items which opens in the sidebar… and i need the BOTTOM of the list not a element. So user click on item to open sidebar and there should be list with the scroll end (like any chat)
Interesting!
Is wwLib.getFrontDocument() documented anywhere?
I learned about it because Aurelie mentioned it and because I like to read weweb’s open source code 
3 Likes
It’s technically not documented as it’s kind of a “hack”. We’ll add the scrolling API as workflow actions for easier use.
3 Likes
@Anna.fae were you able to get your page to scroll to bottom of collections? im trying to follow the thread above and unsure if you got it working. thanks so much!
@dorilama perhaps you can advise? i have a collection showing with ‘chats’ div. when new records are added, i’d like the user to be automatically lowered to the bottom of the ‘chats’ div.
window.scrollToBottom = function(id) {
var chatDiv = wwLib.getFrontDocument().getElementById(id);
chatDiv.scrollTop = chatDiv.scrollHeight;
}
window.scrollToBottom('chats');
i have that in place now and it’s not causing any errors. but nothing is happening either in editor. i have also tried the below. again, no errors, but no movement on frontend either 
const scrollToBottom = (id) => {
const element = wwLib.getFrontDocument().getElementById(id);
element.scrollTop = element.scrollHeight;
}
scrollToBottom("chats");
I haven’t make this to be working, I paused this feature.
assuming the element is already renderend in the page one possible problem is that the new items are still not rendered when you call the method, so there isn’t nothing to scroll.
You can try to test the logic splitted into 2 workflow that you manually trigger for convenience. Add the new items first and then trigger the scroll and see if it’s working.
@dorilama thanks for the thought. i’ve tried this (setup a separate workflow for just the auto-scroll) and unfortunately it doesn’t seem to cause the user to scroll to bottom of element.
@Quentin you’d mentioned possibly adding to the platform natively… any update on that?
my suggestion is not to create a separate workflow for autoscroll.
My suggestion is to split your logic in 2 workflows and trigger them by hand with a button click. This way you can trigger the scroll manually when you see the new item in the page and check that it’s working.
This is the first step I would take to debug the problem (assuming you don’t have any error in the dev console)
@dorilama good news to share, i got it working!
@Anna.fae if you’d like to implement in your project, perhaps this will help.
in the below, i have an element named ‘chatHistory’ which contains the collection. on submit, i call the below workflow which causes the user to drop to most recent message since we’re showing a loading indicator. thanks for your feedback, @dorilama . very helpful and appreciate your support.
function scrollToBottom() {
var chatHistory = wwLib.getFrontDocument().getElementById("chatHistory");
var lastMessage = chatHistory.lastElementChild;
if (lastMessage) {
lastMessage.scrollIntoView({ behavior: 'smooth', block: 'end' });
}
}
scrollToBottom();
4 Likes
when? It is implement? thanks
Hi all,
I have looked at as many threads as I could find on this topic, and in my use-case, none of the provided solutions were working. I’m building a GPT-based chatbot, and I wanted the chat window to scroll to the bottom when the user’s message was added to the list and when the GPT response was added to the list, that way the user never had to scroll to see the most recent content. I think I must have missed a simpler solution, and perhaps some of the custom JS would run when deployed, but I’d like to be able to see that kind of functionality in-editor…
So, TL;DR
I wrapped my chat history collection in a container with an input box at the bottom that has 0 height and 0 opacity with cursor engagement disabled. I gave the wrapper a specific height and set overflow to auto on the wrapper and set the chat history to be full size. Then when I click “Send Message”, in the workflow it runs, it has two actions called “Execute component action”. The first puts focus on the “ForcedScroll” input box at the bottom of the chat window, and the second puts the focus back to the message input box the user was using when they submitted the message.
