Stop overscrolling the RCE content tray

Node: this is not supported in safari, but makes ff and chrome better

closes LS-1785
flag=rce_enhancements

test plan:
  - in a course with a lot of files (or in a short browser)
  - edit something with an rce
  - open the content tray (e.g. Documents > Course Documents)
  - be sure you have a scrollbar on the list of files
  - start scrolling down
  > expect scrolling to stop when you get to the botton, and the
    parent page does not start scrolling

Change-Id: I3ce931066ae9e2268b82bcdf12a2718b6a55feaf
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/256589
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jackson Howe <jackson.howe@instructure.com>
QA-Review: Jackson Howe <jackson.howe@instructure.com>
Product-Review: Peyton Craighill <pcraighill@instructure.com>

packages/canvas-rce/src/rce/plugins/shared/CanvasContentTray.js

@@ -223,6 +223,7 @@ export default function CanvasContentTray(props) {
   const [hidingTrayOnAction, setHidingTrayOnAction] = useState(true)
 
   const trayRef = useRef(null)
+  const scrollingAreaRef = useRef(null)
   const [filterSettings, setFilterSettings] = useFilterSettings()
 
   const {bridge, editor, onTrayClosing} = {...props}
@@ -263,6 +264,16 @@ export default function CanvasContentTray(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor.id, bridge, handleDismissTray, hidingTrayOnAction])
 
+  useEffect(() => {
+    if (
+      hasOpened &&
+      scrollingAreaRef.current &&
+      !scrollingAreaRef.current.style.overscrollBehaviorY
+    ) {
+      scrollingAreaRef.current.style.overscrollBehaviorY = 'contain'
+    }
+  }, [hasOpened])
+
   function handleOpenTray() {
     bridge.focusEditor(editor)
     setHasOpened(true)
@@ -396,7 +407,12 @@ export default function CanvasContentTray(props) {
                 />
               </Flex.Item>
 
-              <Flex.Item grow shrink margin="xx-small xxx-small 0">
+              <Flex.Item
+                grow
+                shrink
+                margin="xx-small xxx-small 0"
+                elementRef={el => (scrollingAreaRef.current = el)}
+              >
                 <ErrorBoundary>
                   <DynamicPanel
                     contentType={filterSettings.contentType}