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

      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


      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


      Can anyone help please ;)

      0


      Sign in to leave a comment.

      Didn't find what you're looking for?

      New post