ts: Migrate `scroll_util.js` to TypeScript.

This commit migrates `scroll_util.js` to typescript. I made a helper
type `JQueryOrZJQuery` for the argument of `get_scroll_element` instead
of adding a `__zjquery` property to the global JQuery object because it
isn't being used anywhere outside of this function and hence it makes
sense to have a little helper type than to add the property to the global
object.

tools/test-js-with-node

@@ -149,7 +149,7 @@ EXEMPT_FILES = make_set(
         "web/src/scheduled_messages.js",
         "web/src/scheduled_messages_overlay_ui.js",
         "web/src/scroll_bar.ts",
-        "web/src/scroll_util.js",
+        "web/src/scroll_util.ts",
         "web/src/search_pill_widget.js",
         "web/src/sent_messages.js",
         "web/src/sentry.ts",

web/src/scroll_util.ts

@@ -1,7 +1,10 @@
 import $ from "jquery";
 import SimpleBar from "simplebar";
 
-export function get_content_element($element) {
+// This type is helpful for testing, where we may have a dummy object instead of an actual jquery object.
+type JQueryOrZJQuery = {__zjquery?: true} & JQuery;
+
+export function get_content_element($element: JQuery): JQuery {
     const element = $element.expectOne()[0];
     const sb = SimpleBar.instances.get(element);
     if (sb) {
@@ -10,9 +13,9 @@ export function get_content_element($element) {
     return $element;
 }
 
-export function get_scroll_element($element) {
+export function get_scroll_element($element: JQueryOrZJQuery): JQuery {
     // For testing we just return the element itself.
-    if ($element && $element.__zjquery) {
+    if ($element?.__zjquery) {
         return $element;
     }
 
@@ -23,12 +26,12 @@ export function get_scroll_element($element) {
     } else if ("simplebar" in element.dataset) {
         // The SimpleBar mutation observer hasn’t processed this element yet.
         // Create the SimpleBar early in case we need to add event listeners.
-        return $(new SimpleBar(element).getScrollElement());
+        return $(new SimpleBar(element).getScrollElement()!);
     }
     return $element;
 }
 
-export function reset_scrollbar($element) {
+export function reset_scrollbar($element: JQuery): void {
     const element = $element.expectOne()[0];
     const sb = SimpleBar.instances.get(element);
     if (sb) {
@@ -38,7 +41,11 @@ export function reset_scrollbar($element) {
     }
 }
 
-export function scroll_delta(opts) {
+export function scroll_delta(opts: {
+    elem_top: number;
+    elem_bottom: number;
+    container_height: number;
+}): number {
     const elem_top = opts.elem_top;
     const container_height = opts.container_height;
     const elem_bottom = opts.elem_bottom;
@@ -58,16 +65,19 @@ export function scroll_delta(opts) {
     return delta;
 }
 
-export function scroll_element_into_container($elem, $container, sticky_header_height = 0) {
+export function scroll_element_into_container(
+    $elem: JQuery,
+    $container: JQuery,
+    sticky_header_height = 0,
+): void {
     // This does the minimum amount of scrolling that is needed to make
     // the element visible.  It doesn't try to center the element, so
     // this will be non-intrusive to users when they already have
     // the element visible.
-
     $container = get_scroll_element($container);
     const elem_top = $elem.position().top - sticky_header_height;
-    const elem_bottom = elem_top + $elem.innerHeight();
+    const elem_bottom = elem_top + ($elem.innerHeight() ?? 0);
-    const container_height = $container.height() - sticky_header_height;
+    const container_height = ($container.height() ?? 0) - sticky_header_height;
 
     const opts = {
         elem_top,
@@ -81,5 +91,5 @@ export function scroll_element_into_container($elem, $container, sticky_header_h
         return;
     }
 
-    $container.scrollTop($container.scrollTop() + delta);
+    $container.scrollTop(($container.scrollTop() ?? 0) + delta);
 }