Recent searches


No recent searches

Uncaught TypeError: Cannot read properties of null (reading 'scrollHeight')

Answered


Posted Aug 03, 2023

Hi 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:

  "defaultLocale": "en",
  "private": true,
  "location": {
    "support": {
      "ticket_sidebar": {
        "url": "assets/iframe.html",
        "flexible": true,
        "size": {
          "height": "500px"
        }
      },
      "new_ticket_sidebar": {
        "url": "assets/iframe.html",
        "flexible": true,
        "size": {
          "height": "500px"
        }
      }
    }
  },
  "version": "1.0",
  "frameworkVersion": "2.0"
 
 

0

3

3 comments

Can anyone help please ;)

0


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
            }
            )),

 

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.

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post