I’m using the Ionic V4 with React for Capacitor in that I want to use the ion-content. like scrollByPoint, scrollToBottom, scrollToPoint, scrollToTop, getScrollElement etc. This methods we can easily use with Angular. I have already tried scrollToBottom.
where I’m trying to do,
getContent() {
return document.querySelector(‘ion-content’);
}
scrollToBottom = () => {
this.getContent().scrollToBottom(500);
}
It’s showing me error, "Object is possibly ‘null’. "
How can I achieve this. Thanks in advance for any help.
I know this is an old post but you can solve the problem like this
function getContent() {
return document.querySelector(‘ion-content’);
}
function scrollToBottom() {
const container = this.getContent();
if(container) container!.scrollToBottom(500);
}
The type of function doesn’t matter, the concept would stay the same.
The method scrollToBottom with React doesn’t work at all… Only ScrollToTop works with Ionic React…
Quick and dirty fix:
function getContent() {
return document.querySelector('ion-content#chat-content');
}
function scrollToBottom() {
const container = getContent();
if(container) container.scrollToPoint(0, 99999);
}
I don’t know why, but setting timeout worked like a charm. The code was then:
useEffect(() => {
const timer = setTimeout(() => chat_content.current?.scrollToBottom(), 500);
return () => clearTimeout(timer);
}, [discussion]);