Uncaught TypeError: Cannot read properties of null (reading 'scrollHeight')
AnsweredHi All,
I've created a Support app using REACT and everything works perfectly except the scroll bar that appears when the app is loaded.
I get an error message that displays:
Uncaught TypeError: Cannot read properties of null (reading 'scrollHeight')
When the app is loaded.
Info from my manifest file below:
-
Can anyone help please ;)
-
I don't think this error is related to your app because I get it too. It seems to be an error with a SunCo script because its source is cdn.smooch.io.
Have you tried removing it with CSS?
body {
overflow-y: hidden; /* Hide vertical scrollbar */
} -
Thanks - that doesnt work. funny that the app.js file in the dist folder includes css for an "overflow-y" property and I can modify that to "hidden" to hide it but dont know whats creating it
Following the error message, there's a function "getScrollTopAtBottom" that is using this property causing this error - see below
I note this code stack is using an old version of REACT and could be that
"react": "^16.8.0","react-dom": "^16.8.0",I()(tt()(r), "getScrollTopAtBottom", (function() {
var e = r._logo
, t = e ? e.clientHeight : 0;
return {
scrollTopAtBottom: r._container.current.scrollHeight - r._container.current.clientHeight - t - 10,
container: r._container.current
}
}
)),
I()(tt()(r), "scrollToBottom", (function() {
var e = r.props
, t = e.dispatch
, n = e.shouldScrollToBottom
, o = e.typingIndicatorShown
, i = r.getScrollTopAtBottom()
, a = i.container
, s = i.scrollTopAtBottom;
(Object(Vi.c)(r.props.replyActionsParentMessage).length > 0 || o) && (s += 10),
a.scrollTop = s,
n && t(Object(ve.u)(!1))
}
)),
I()(tt()(r), "updateScrollPosition", (function(e, t) {
var n = r.getScrollTopAtBottom()
, o = n.container
, i = n.scrollTopAtBottom <= o.scrollTop + 1;
(r.props.widgetOpened || r.props.embedded) && t > 0 && i && r.props.dispatch(Object(he.B)(r.props.conversation._id)),
e !== i && r.props.dispatch(function(e) {
return {
type: ie.c,
isAtBottom: e
}
}(i))
}
)),
I()(tt()(r), "scrollToPreviousFirstMessage", (function() {
var e = r._lastTopMessageNode;
r.props.hasMoreMessages ? r._lastTopMessageNodePosition && !r._isScrolling && (r._isScrolling = !0,
r._container.current.scrollTop = Object(we.b)(e, r._container.current),
r._isScrolling = !1) : r._container.current.scrollTop = Object(we.b)(e, r._container.current) - 47,
r._lastTopMessageNode = void 0
}
)), -
Problem solved!!
You can hide it in the html template file under the <body> tag
<style>html {overflow-y: hidden; /* Hide vertical scrollbar */}</style>To fix properly, you need to update @zendeskgarden/css-bedrock to 9.1.1.
Please sign in to leave a comment.
4 Comments