@@ -64,3 +64,16 @@ export const _getThemeProperty = theme => (
 
 export const ConditionalWrapper = ({ condition, wrapper, children }) =>
   condition ? wrapper(children) : children
+
+export const scrollToBottom = (timeout = 100) => {
+  const botonicScrollableArea = document.getElementById(
+    'botonic-scrollable-content'
+  )
+  const frame =
+    botonicScrollableArea &&
+    botonicScrollableArea.querySelectorAll('.simplebar-content-wrapper')[0]
+  if (frame) {
+    frame.scrollTop = frame.scrollHeight
+    setTimeout(() => (frame.scrollTop = frame.scrollHeight), timeout)
+  }
+}
@@ -2,6 +2,7 @@ import { COLORS } from '../../constants'
 import styled, { css } from 'styled-components'
 import SimpleBar from 'simplebar-react'
 import 'simplebar/dist/simplebar.css'
+import './styled-scrollbar.scss'
 
 export const StyledScrollbar = styled(SimpleBar)`
   ${props =>
 
@@ -0,0 +1,6 @@
+#botonic-scrollable-content
+  .simplebar-mask
+  .simplebar-offset
+  .simplebar-content-wrapper {
+  scroll-behavior: smooth;
+}
@@ -1,5 +1,6 @@
 import { useEffect, useReducer, useState, useRef } from 'react'
 import { WEBCHAT, COLORS } from '../constants'
+import { scrollToBottom } from '../utils'
 
 export const webchatInitialState = {
   width: WEBCHAT.DEFAULTS.WIDTH,
@@ -191,11 +192,7 @@ export function useWebchat() {
 export function useTyping({ webchatState, updateTyping, updateMessage }) {
   useEffect(() => {
     let delayTimeout, typingTimeout
-    const end = document.getElementById('messages-end')
-    if (end) {
-      end.scrollIntoView({ behavior: 'smooth' })
-      setTimeout(() => end.scrollIntoView({ behavior: 'smooth' }), 100)
-    }
+    scrollToBottom()
     try {
       const nextMsg = webchatState.messagesJSON.filter(m => !m.display)[0]
       if (nextMsg.delay && nextMsg.typing) {
 
@@ -42,6 +42,7 @@ export const WebchatMessageList = props => {
 
   return (
     <StyledScrollbar
+      id='botonic-scrollable-content'
       scrollbar={scrollbarOptions}
       autoHide={scrollbarOptions.autoHide}
       ismessagescontainer='true'
 
@@ -32,6 +32,7 @@ import {
   staticAsset,
   _getThemeProperty,
   ConditionalWrapper,
+  scrollToBottom,
 } from '../utils'
 import { WEBCHAT, MIME_WHITELIST, COLORS } from '../constants'
 import { motion } from 'framer-motion'
@@ -191,12 +192,7 @@ export const Webchat = forwardRef((props, ref) => {
 
   useEffect(() => {
     if (!webchatState.isWebchatOpen) return
-    setTimeout(() => {
-      const end = document.getElementById('messages-end')
-      if (end) {
-        end.scrollIntoView()
-      }
-    })
+    scrollToBottom()
   }, [webchatState.isWebchatOpen])
 
   useEffect(() => {
@@ -484,7 +480,6 @@ export const Webchat = forwardRef((props, ref) => {
       messages={webchatState.messagesComponents}
     >
       {webchatState.typing && <TypingIndicator />}
-      <div id='messages-end' />
     </WebchatMessageList>
   )
   const webchatReplies = () => <WebchatReplies replies={webchatState.replies} />