diff --git a/.eslintrc.json b/.eslintrc.json
index 32e1732a88..fd283e1bc9 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -16,7 +16,6 @@
         "LightboxCanvas": false,
         "MessageListData": false,
         "MessageListView": false,
-        "PerfectScrollbar": false,
         "Plotly": false,
         "SockJS": false,
         "Socket": false,
diff --git a/frontend_tests/node_tests/activity.js b/frontend_tests/node_tests/activity.js
index ab25341e42..60f9750bc2 100644
--- a/frontend_tests/node_tests/activity.js
+++ b/frontend_tests/node_tests/activity.js
@@ -20,7 +20,7 @@ const _channel = {};
 
 const _ui = {
     set_up_scrollbar: function () {},
-    update_scrollbar: function () {},
+    get_content_element: element => element,
 };
 
 const _keydown_util = {
diff --git a/frontend_tests/node_tests/buddy_list.js b/frontend_tests/node_tests/buddy_list.js
index b6d3351c91..4f3045f10f 100644
--- a/frontend_tests/node_tests/buddy_list.js
+++ b/frontend_tests/node_tests/buddy_list.js
@@ -2,6 +2,7 @@ set_global('$', global.make_zjquery());
 zrequire('people');
 zrequire('buddy_data');
 zrequire('buddy_list');
+zrequire('ui');
 
 set_global('blueslip', global.make_zblueslip());
 
diff --git a/frontend_tests/node_tests/pm_list.js b/frontend_tests/node_tests/pm_list.js
index dc60a16a98..d00e10a8a2 100644
--- a/frontend_tests/node_tests/pm_list.js
+++ b/frontend_tests/node_tests/pm_list.js
@@ -6,7 +6,6 @@ set_global('resize', {
 });
 set_global('ui', {
     set_up_scrollbar: function () {},
-    update_scrollbar: function () {},
 });
 set_global('stream_popover', {
     hide_topic_popover: function () {},
diff --git a/frontend_tests/node_tests/scroll_util.js b/frontend_tests/node_tests/scroll_util.js
index 4effeccec7..fc73fc8f13 100644
--- a/frontend_tests/node_tests/scroll_util.js
+++ b/frontend_tests/node_tests/scroll_util.js
@@ -1,4 +1,7 @@
 zrequire('scroll_util');
+set_global('ui', {
+    get_scroll_element: element => element,
+});
 
 run_test('scroll_delta', () => {
     // If we are entirely on-screen, don't scroll
diff --git a/frontend_tests/node_tests/stream_list.js b/frontend_tests/node_tests/stream_list.js
index d9b1e6b808..5edc814007 100644
--- a/frontend_tests/node_tests/stream_list.js
+++ b/frontend_tests/node_tests/stream_list.js
@@ -17,6 +17,7 @@ zrequire('scroll_util');
 zrequire('list_cursor');
 zrequire('stream_list');
 zrequire('topic_zoom');
+zrequire('ui');
 
 stream_color.initialize();
 
@@ -326,14 +327,9 @@ run_test('narrowing', () => {
     stream_list.zoom_out_topics = noop;
     scroll_util.scroll_element_into_container = noop;
 
-    var scrollbar_updated = false;
-
     set_global('ui', {
-        update_scrollbar: function () {scrollbar_updated = true;},
+        get_scroll_element: element => element,
     });
-    ui.update_scrollbar(
-        $.stub_selector("#stream-filters-container")
-    );
 
     assert(!$('<devel sidebar row html>').hasClass('active-filter'));
 
@@ -346,9 +342,7 @@ run_test('narrowing', () => {
     ]);
     stream_list.handle_narrow_activated(filter);
     assert($('<devel sidebar row html>').hasClass('active-filter'));
-    assert(scrollbar_updated);  // Make sure we are updating perfectScrollbar.
 
-    scrollbar_updated = false;
     filter = new Filter([
         {operator: 'stream', operand: 'cars'},
         {operator: 'topic', operand: 'sedans'},
@@ -356,7 +350,6 @@ run_test('narrowing', () => {
     stream_list.handle_narrow_activated(filter);
     assert(!$("ul.filters li").hasClass('active-filter'));
     assert(!$('<cars sidebar row html>').hasClass('active-filter')); // false because of topic
-    assert(scrollbar_updated);  // Make sure we are updating perfectScrollbar.
 
     filter = new Filter([
         {operator: 'stream', operand: 'cars'},
diff --git a/frontend_tests/node_tests/subs.js b/frontend_tests/node_tests/subs.js
index 9114d40449..5a11174546 100644
--- a/frontend_tests/node_tests/subs.js
+++ b/frontend_tests/node_tests/subs.js
@@ -1,7 +1,10 @@
 global.stub_out_jquery();
 
 set_global('templates', {});
-set_global('ui', {});
+set_global('ui', {
+    get_content_element: element => element,
+    get_scroll_element: element => element,
+});
 zrequire('util');
 zrequire('stream_data');
 zrequire('search_util');
diff --git a/frontend_tests/node_tests/ui_init.js b/frontend_tests/node_tests/ui_init.js
index e7b10e5f71..55af39807d 100644
--- a/frontend_tests/node_tests/ui_init.js
+++ b/frontend_tests/node_tests/ui_init.js
@@ -74,6 +74,7 @@ zrequire('util');
 
 util.is_mobile = () => false;
 templates.render = () => 'some-html';
+ui.get_scroll_element = element => element;
 
 zrequire('echo');
 zrequire('colorspace');
diff --git a/package.json b/package.json
index 7644547f8a..7072781bf8 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,6 @@
     "moment": "2.22.1",
     "moment-timezone": "0.5.17",
     "node-sass": "4.9.0",
-    "perfect-scrollbar": "1.3.0",
     "plotly.js": "1.37.1",
     "sass-loader": "7.0.1",
     "script-loader": "0.7.2",
diff --git a/static/js/activity.js b/static/js/activity.js
index 9e2a7768ec..6ceb59891f 100644
--- a/static/js/activity.js
+++ b/static/js/activity.js
@@ -28,26 +28,6 @@ exports.new_user_input = true;
 
 var huddle_timestamps = new Dict();
 
-exports.update_scrollbar = (function () {
-    var $buddy_list_wrapper = $("#buddy_list_wrapper");
-    var $group_pms = $("#group-pms");
-
-    return {
-        users: function () {
-            if (!$buddy_list_wrapper.length) {
-                $buddy_list_wrapper = $("#buddy_list_wrapper");
-            }
-            ui.update_scrollbar($buddy_list_wrapper);
-        },
-        group_pms: function () {
-            if (!$group_pms.length) {
-                $group_pms = $("#group-pms");
-            }
-            ui.update_scrollbar($group_pms);
-        },
-    };
-}());
-
 function update_pm_count_in_dom(count_span, value_span, count) {
     var li = count_span.parent();
 
@@ -203,8 +183,6 @@ exports.redraw_user = function (user_id) {
         key: user_id,
         item: info,
     });
-
-    exports.update_scrollbar.users();
 };
 
 exports.searching = function () {
@@ -270,7 +248,7 @@ exports.update_huddles = function () {
     });
 
     var html = templates.render('group_pms', {group_pms: group_pms});
-    $('#group-pms').expectOne().html(html);
+    ui.get_content_element($('#group-pms')).html(html);
 
     _.each(huddles, function (user_ids_string) {
         var count = unread.num_unread_for_person(user_ids_string);
@@ -278,7 +256,6 @@ exports.update_huddles = function () {
     });
 
     show_huddles();
-    exports.update_scrollbar.group_pms();
 };
 
 function focus_ping(want_redraw) {
@@ -351,6 +328,7 @@ exports.initialize = function () {
     exports.build_user_sidebar();
     exports.update_huddles();
 
+    ui.set_up_scrollbar($("#buddy_list_wrapper"));
     buddy_list.start_scroll_handler();
 
     // Let the server know we're here, but pass "false" for
@@ -363,7 +341,6 @@ exports.initialize = function () {
 
     setInterval(get_full_presence_list_update, ACTIVE_PING_INTERVAL_MS);
 
-    ui.set_up_scrollbar($("#buddy_list_wrapper"));
     ui.set_up_scrollbar($("#group-pms"));
 };
 
diff --git a/static/js/buddy_list.js b/static/js/buddy_list.js
index e6f9f153b6..2e7b8c9192 100644
--- a/static/js/buddy_list.js
+++ b/static/js/buddy_list.js
@@ -289,7 +289,7 @@ function buddy_list_create() {
     self.fill_screen_with_content = function () {
         var height_to_fill = self.height_to_fill();
 
-        var elem = $(self.scroll_container_sel).expectOne()[0];
+        var elem = ui.get_scroll_element($(self.scroll_container_sel)).expectOne()[0];
 
         // Add a fudge factor.
         height_to_fill += 10;
@@ -317,7 +317,7 @@ function buddy_list_create() {
     self.start_scroll_handler = function () {
         // We have our caller explicitly call this to make
         // sure everything's in place.
-        var scroll_container = $(self.scroll_container_sel);
+        var scroll_container = ui.get_scroll_element($(self.scroll_container_sel));
 
         scroll_container.scroll(function () {
             self.fill_screen_with_content();
diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js
index 161d523508..41754fb4af 100644
--- a/static/js/bundles/app.js
+++ b/static/js/bundles/app.js
@@ -20,7 +20,6 @@ import "node_modules/handlebars/dist/handlebars.runtime.js";
 import "node_modules/to-markdown/dist/to-markdown.js";
 import "node_modules/flatpickr/dist/flatpickr.js";
 import "node_modules/flatpickr/dist/plugins/confirmDate/confirmDate.js";
-import "node_modules/perfect-scrollbar/dist/perfect-scrollbar.js";
 import "node_modules/error-stack-parser/dist/error-stack-parser.min.js";
 import "node_modules/sortablejs/Sortable.js";
 import "generated/emoji/emoji_codes.js";
diff --git a/static/js/bundles/commons.js b/static/js/bundles/commons.js
index 0d7cd5165b..c8adc103f2 100644
--- a/static/js/bundles/commons.js
+++ b/static/js/bundles/commons.js
@@ -13,7 +13,7 @@ import "node_modules/sortablejs/Sortable.js";
 import "third/bootstrap/css/bootstrap.css";
 import "third/bootstrap/css/bootstrap-btn.css";
 import "third/bootstrap/css/bootstrap-responsive.css";
-import "node_modules/perfect-scrollbar/css/perfect-scrollbar.css";
+import "node_modules/simplebar/dist/simplebar.css";
 import "node_modules/font-awesome/css/font-awesome.css";
 import "generated/icons/style.css";
 import "node_modules/source-sans-pro/source-sans-pro.css";
diff --git a/static/js/emoji_picker.js b/static/js/emoji_picker.js
index 3857343bae..0e3c9e299a 100644
--- a/static/js/emoji_picker.js
+++ b/static/js/emoji_picker.js
@@ -334,10 +334,10 @@ function may_be_change_focused_emoji(next_section, next_index, preserve_scroll)
             next_emoji.focus();
         } else {
             var $emoji_map = $(".emoji-popover-emoji-map");
-            var start = $emoji_map.scrollTop();
+            var start = ui.get_scroll_element($emoji_map).scrollTop();
             next_emoji.focus();
-            if ($emoji_map.scrollTop() !== start) {
-                $emoji_map.scrollTop(start);
+            if (ui.get_scroll_element($emoji_map).scrollTop() !== start) {
+                ui.get_scroll_element($emoji_map).scrollTop(start);
             }
         }
         update_emoji_showcase(next_emoji);
@@ -352,7 +352,7 @@ function may_be_change_active_section(next_section) {
         current_index = 0;
         var offset = section_head_offsets[current_section];
         if (offset) {
-            $(".emoji-popover-emoji-map").scrollTop(offset.position_y);
+            ui.get_scroll_element($(".emoji-popover-emoji-map")).scrollTop(offset.position_y);
             may_be_change_focused_emoji(current_section, current_index);
         }
     }
@@ -427,7 +427,7 @@ exports.navigate = function (event_name) {
            is_cursor_at_end && event_name === "right_arrow") {
             selected_emoji.focus();
             if (current_section === 0 && current_index < 6) {
-                $(".emoji-popover-emoji-map").scrollTop(0);
+                ui.get_scroll_element($(".emoji-popover-emoji-map")).scrollTop(0);
             }
             update_emoji_showcase(selected_emoji);
             return true;
@@ -449,8 +449,8 @@ exports.navigate = function (event_name) {
             // consistent (cursor goes to the end of the filter
             // string).
             $('.emoji-popover-filter').focus().caret(Infinity);
-            $(".emoji-popover-emoji-map").scrollTop(0);
-            $(".emoji-search-results-container").scrollTop(0);
+            ui.get_scroll_element($(".emoji-popover-emoji-map")).scrollTop(0);
+            ui.get_scroll_element($(".emoji-search-results-container")).scrollTop(0);
             current_section = 0;
             current_index = 0;
             reset_emoji_showcase();
@@ -549,8 +549,8 @@ exports.emoji_select_tab = function (elt) {
 function register_popover_events(popover) {
     var $emoji_map = popover.find('.emoji-popover-emoji-map');
 
-    $emoji_map.on("scroll", function () {
-        emoji_picker.emoji_select_tab($emoji_map);
+    ui.get_scroll_element($emoji_map).on("scroll", function () {
+        emoji_picker.emoji_select_tab(ui.get_scroll_element($emoji_map));
     });
 
     $('.emoji-popover-filter').on('input', filter_emojis);
@@ -713,7 +713,7 @@ exports.register_click_handlers = function () {
         }.bind(this));
 
         if (offset) {
-            $(".emoji-popover-emoji-map").scrollTop(offset.position_y);
+            ui.get_scroll_element($(".emoji-popover-emoji-map")).scrollTop(offset.position_y);
         }
     });
 
diff --git a/static/js/resize.js b/static/js/resize.js
index 7e9a6cefce..9118018e95 100644
--- a/static/js/resize.js
+++ b/static/js/resize.js
@@ -33,10 +33,10 @@ function set_user_list_heights(res, usable_height, buddy_list_wrapper, group_pms
     //    res.group_pms_max_height
     var blocks = [
         {
-            real_height: buddy_list_wrapper.prop('scrollHeight'),
+            real_height: ui.get_scroll_element(buddy_list_wrapper).prop('scrollHeight'),
         },
         {
-            real_height: group_pms.prop('scrollHeight'),
+            real_height: ui.get_scroll_element(group_pms).prop('scrollHeight'),
         },
     ];
 
@@ -115,7 +115,7 @@ function left_userlist_get_new_heights() {
     var buddy_list_wrapper = $('#buddy_list_wrapper').expectOne();
 
     var stream_filters_real_height = stream_filters.prop("scrollHeight");
-    var user_list_real_height = buddy_list_wrapper.prop("scrollHeight");
+    var user_list_real_height = ui.get_scroll_element(buddy_list_wrapper).prop("scrollHeight");
 
     res.total_leftlist_height = viewport_height
                                 - parseInt($("#left-sidebar").css("marginTop"), 10)
@@ -200,7 +200,6 @@ exports.resize_stream_filters_container = function (h) {
     h = narrow_window ? left_userlist_get_new_heights() : get_new_heights();
     exports.resize_bottom_whitespace(h);
     $("#stream-filters-container").css('max-height', h.stream_filters_max_height);
-    ui.update_scrollbar($("#stream-filters-container"));
 };
 
 exports.resize_page_components = function () {
@@ -242,10 +241,6 @@ exports.resize_page_components = function () {
     $("#group-pms").css('max-height', h.group_pms_max_height);
 
     $("#stream-filters-container").css('max-height', h.stream_filters_max_height);
-    ui.update_scrollbar($("#stream-filters-container"));
-
-    activity.update_scrollbar.users();
-    activity.update_scrollbar.group_pms();
 
     panels.resize_app();
 };
diff --git a/static/js/scroll_util.js b/static/js/scroll_util.js
index c414f26ded..4f92571d29 100644
--- a/static/js/scroll_util.js
+++ b/static/js/scroll_util.js
@@ -34,6 +34,7 @@ exports.scroll_element_into_container = function (elem, container) {
     // this will be non-intrusive to users when they already have
     // the element visible.
 
+    container = ui.get_scroll_element(container);
     var elem_top = elem.position().top;
     var elem_bottom = elem_top + elem.innerHeight();
 
diff --git a/static/js/settings_panel_menu.js b/static/js/settings_panel_menu.js
index f5673d1e85..330f4616e4 100644
--- a/static/js/settings_panel_menu.js
+++ b/static/js/settings_panel_menu.js
@@ -73,12 +73,12 @@ exports.make_menu = function (opts) {
 
         $(".settings-section, .settings-wrapper").removeClass("show");
 
-        ui.reset_scrollbar($("#settings_content"));
-
         settings_sections.load_settings_section(section);
 
         self.get_panel().addClass('show');
 
+        ui.reset_scrollbar($("#settings_content"));
+
         var $settings_overlay_container = $("#settings_overlay_container");
         $settings_overlay_container.find(".right").addClass("show");
         $settings_overlay_container.find(".settings-header.mobile").addClass("slide-left");
diff --git a/static/js/stream_edit.js b/static/js/stream_edit.js
index 79aee58ca1..07574bc9cb 100644
--- a/static/js/stream_edit.js
+++ b/static/js/stream_edit.js
@@ -230,14 +230,12 @@ exports.show_settings_for = function (node) {
 
     stream_data.update_calculated_fields(sub);
     var html = templates.render('subscription_settings', sub);
-    $('.subscriptions .right .settings').html(html);
+    ui.get_content_element($('.subscriptions .right .settings')).html(html);
 
     var sub_settings = exports.settings_for_sub(sub);
 
     $(".nothing-selected").hide();
 
-    ui.update_scrollbar($("#subscription_overlay .settings"));
-
     sub_settings.addClass("show");
 
     show_subscription_settings(sub_settings);
@@ -392,7 +390,6 @@ exports.change_stream_name = function (e) {
         error: function (xhr) {
             new_name_box.text(stream_data.maybe_get_stream_name(stream_id));
             ui_report.error(i18n.t("Error"), xhr, $(".stream_change_property_info"));
-            ui.update_scrollbar($("#subscription_overlay .settings"));
         },
     });
 };
@@ -435,7 +432,6 @@ exports.change_stream_description = function (e) {
         error: function (xhr) {
             sub_settings.find('.stream-description-editable').html(sub.rendered_description);
             ui_report.error(i18n.t("Error"), xhr, $(".stream_change_property_info"));
-            ui.update_scrollbar($("#subscription_overlay .settings"));
         },
     });
 };
@@ -566,7 +562,6 @@ exports.initialize = function () {
             }
             stream_subscription_info_elem.addClass('text-success')
                 .removeClass('text-error');
-            ui.update_scrollbar($("#subscription_overlay .settings"));
         }
 
         function removal_failure() {
diff --git a/static/js/stream_list.js b/static/js/stream_list.js
index 52490dced5..9ba59334f7 100644
--- a/static/js/stream_list.js
+++ b/static/js/stream_list.js
@@ -426,8 +426,6 @@ exports.handle_narrow_activated = function (filter) {
     if (stream_li) {
         exports.scroll_stream_into_view(stream_li);
     }
-    // Update scrollbar size.
-    ui.update_scrollbar($("#stream-filters-container"));
 };
 
 exports.handle_narrow_deactivated = function () {
@@ -510,7 +508,7 @@ exports.set_event_handlers = function () {
     });
 
     // check for user scrolls on streams list for first time
-    $('#stream-filters-container').on('scroll', function () {
+    ui.get_scroll_element($('#stream-filters-container')).on('scroll', function () {
         has_scrolled = true;
         // remove listener once user has scrolled
         $(this).off('scroll');
diff --git a/static/js/stream_ui_updates.js b/static/js/stream_ui_updates.js
index 5d8bce3fd9..41f93d7957 100644
--- a/static/js/stream_ui_updates.js
+++ b/static/js/stream_ui_updates.js
@@ -172,7 +172,6 @@ exports.update_subscribers_list = function (sub) {
             stream_edit.sort_but_pin_current_user_on_top(emails);
             subscribers_list.data(emails);
             subscribers_list.render();
-            ui.update_scrollbar($(".subscriber_list_container"));
         }
         $(".subscriber_list_settings_container").show();
     }
diff --git a/static/js/subs.js b/static/js/subs.js
index 8364ffcb5e..b5d5b9956c 100644
--- a/static/js/subs.js
+++ b/static/js/subs.js
@@ -230,11 +230,12 @@ exports.add_sub_to_table = function (sub) {
     var html = templates.render('subscription', sub);
     var settings_html = templates.render('subscription_settings', sub);
     if (stream_create.get_name() === sub.name) {
-        $(".streams-list").prepend(html).scrollTop(0);
+        ui.get_content_element($(".streams-list")).prepend(html);
+        ui.reset_scrollbar($(".streams-list"));
     } else {
-        $(".streams-list").append(html);
+        ui.get_content_element($(".streams-list")).append(html);
     }
-    $(".subscriptions .settings").append($(settings_html));
+    ui.get_content_element($(".subscriptions .settings")).append($(settings_html));
 
     if (stream_create.get_name() === sub.name) {
         // This `stream_create.get_name()` check tells us whether the
@@ -393,7 +394,7 @@ exports.populate_stream_settings_left_panel = function () {
         subscriptions: sub_rows,
     };
     var html = templates.render('subscriptions', template_data);
-    $('#subscriptions_table .streams-list').html(html);
+    ui.get_content_element($('#subscriptions_table .streams-list')).html(html);
 };
 
 // query is now an object rather than a string.
@@ -402,7 +403,7 @@ exports.filter_table = function (query) {
     exports.show_active_stream_in_left_panel();
 
     var widgets = {};
-    var streams_list_scrolltop = $(".streams-list").scrollTop();
+    var streams_list_scrolltop = ui.get_scroll_element($(".streams-list")).scrollTop();
 
     var stream_ids = [];
     _.each($("#subscriptions_table .stream-row"), function (row) {
@@ -443,13 +444,13 @@ exports.filter_table = function (query) {
     );
 
     _.each(all_stream_ids, function (stream_id) {
-        $('#subscriptions_table .streams-list').append(widgets[stream_id]);
+        ui.get_content_element($('#subscriptions_table .streams-list')).append(widgets[stream_id]);
     });
 
     exports.maybe_reset_right_panel();
 
     // this puts the scrollTop back to what it was before the list was updated again.
-    $(".streams-list").scrollTop(streams_list_scrolltop);
+    ui.get_scroll_element($(".streams-list")).scrollTop(streams_list_scrolltop);
 };
 
 var subscribed_only = true;
diff --git a/static/js/topic_list.js b/static/js/topic_list.js
index c734a389b5..5135e1a70d 100644
--- a/static/js/topic_list.js
+++ b/static/js/topic_list.js
@@ -305,12 +305,9 @@ exports.zoom_in = function () {
         if (after_count === before_count) {
             widget.show_no_more_topics();
         }
-
-        ui.update_scrollbar($("#stream-filters-container"));
     }
 
-    $('#stream-filters-container').scrollTop(0);
-    ui.update_scrollbar($("#stream-filters-container"));
+    ui.get_scroll_element($('#stream-filters-container')).scrollTop(0);
     active_widget.show_spinner();
     topic_data.get_server_history(stream_id, on_success);
 };
diff --git a/static/js/ui.js b/static/js/ui.js
index bc6a19ba71..b749576c56 100644
--- a/static/js/ui.js
+++ b/static/js/ui.js
@@ -1,5 +1,7 @@
 var ui = (function () {
 
+var SimpleBar = require("simplebar").default;
+
 var exports = {};
 
 // What, if anything, obscures the home tab?
@@ -13,34 +15,37 @@ exports.replace_emoji_with_text = function (element) {
     });
 };
 
-exports.set_up_scrollbar = function (element) {
-    var perfectScrollbar = new PerfectScrollbar(element[0], {
-        suppressScrollX: true,
-        useKeyboard: false,
-        wheelSpeed: 0.68,
-        scrollingThreshold: 50,
-        minScrollbarLength: 40,
-    });
-    element[0].perfectScrollbar = perfectScrollbar;
+exports.set_up_scrollbar = function (element_selector) {
+    new SimpleBar(element_selector.expectOne()[0]);
 };
 
-exports.update_scrollbar = function (element_selector) {
-    var element = element_selector[0];
-    if (element.perfectScrollbar !== undefined) {
-        element.perfectScrollbar.update();
+exports.get_content_element = function (element_selector) {
+    var element = element_selector.expectOne()[0];
+    if (element.SimpleBar) {
+        return $(element.SimpleBar.getContentElement());
     }
+    return element_selector;
+};
+
+exports.get_scroll_element = function (element_selector) {
+    var element = element_selector.expectOne()[0];
+    if (element.SimpleBar) {
+        return $(element.SimpleBar.getScrollElement());
+    }
+    return element_selector;
 };
 
 exports.reset_scrollbar = function (element_selector) {
-    var element = element_selector[0];
-    element.scrollTop = 0;
-    if (element.perfectScrollbar !== undefined) {
-        element.perfectScrollbar.update();
+    var element = element_selector.expectOne()[0];
+    if (element.SimpleBar) {
+        element.SimpleBar.getScrollElement().scrollTop = 0;
+    } else {
+        element.scrollTop = 0;
     }
 };
 
-exports.destroy_scrollbar = function (element) {
-    element[0].perfectScrollbar.destroy();
+exports.destroy_scrollbar = function (element_selector) {
+    element_selector.expectOne()[0].SimpleBar.unMount();
 };
 
 function update_message_in_all_views(message_id, callback) {
diff --git a/static/js/ui_init.js b/static/js/ui_init.js
index 9de6a62390..89e565c7fa 100644
--- a/static/js/ui_init.js
+++ b/static/js/ui_init.js
@@ -91,13 +91,13 @@ exports.initialize_kitchen_sink_stuff = function () {
     // element is already at the top or bottom.  Otherwise we get a
     // new scroll event on the parent (?).
     $('.modal-body, .scrolling_list, input, textarea').on('wheel', function (e) {
-        var self = $(this);
+        var self = ui.get_scroll_element($(this));
         var scroll = self.scrollTop();
         var delta = e.originalEvent.deltaY;
 
         // The -1 fudge factor is important here due to rounding errors.  Better
         // to err on the side of not scrolling.
-        var max_scroll = this.scrollHeight - self.innerHeight() - 1;
+        var max_scroll = self.prop("scrollHeight") - self.innerHeight() - 1;
 
         e.stopPropagation();
         if (delta < 0 && scroll <= 0 ||
diff --git a/static/styles/components.scss b/static/styles/components.scss
index e4487bbd9f..841e4977dd 100644
--- a/static/styles/components.scss
+++ b/static/styles/components.scss
@@ -66,12 +66,44 @@ a.no-underline:hover {
     font-style: italic;
 }
 
-.ps--scrolling-x > .ps__rail-x > .ps__thumb-x:hover {
-    background-color: hsl(0, 0%, 38%);
+.simplebar-track .simplebar-scrollbar::before {
+    background-color: rgb(136, 136, 136);
 }
 
-.ps--scrolling-y > .ps__rail-y > .ps__thumb-y:hover {
-    background-color: hsl(0, 0%, 38%);
+.simplebar-track.simplebar-vertical {
+    transition: width 0.2s ease 1s;
+}
+
+.simplebar-track.simplebar-vertical.simplebar-hover {
+    width: 15px;
+    transition: width 0.2s ease;
+}
+
+.simplebar-track.simplebar-vertical .simplebar-scrollbar {
+    transition: width 0.2s ease 1s;
+}
+
+.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-hover {
+    width: 11px;
+    transition: width 0.2s ease;
+}
+
+.simplebar-track.simplebar-horizontal {
+    transition: height 0.2s ease 1s;
+}
+
+.simplebar-track.simplebar-horizontal.simplebar-hover {
+    height: 15px;
+    transition: height 0.2s ease;
+}
+
+.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
+    transition: height 0.2s ease 1s;
+}
+
+.simplebar-track.simplebar-horizontal .simplebar-scrollbar.simplebar-hover {
+    height: 11px;
+    transition: height 0.2s ease;
 }
 
 /* -- flex forms -- */
diff --git a/static/styles/left-sidebar.scss b/static/styles/left-sidebar.scss
index d275cc1960..11c090f8b7 100644
--- a/static/styles/left-sidebar.scss
+++ b/static/styles/left-sidebar.scss
@@ -119,7 +119,7 @@ li.show-more-topics a {
 #private-container,
 #stream-filters-container {
     overflow-x: hidden;
-    overflow-y: hidden;
+    overflow-y: auto;
     position: relative;
     z-index: 0;
     width: 100%;
diff --git a/static/styles/night_mode.scss b/static/styles/night_mode.scss
index 65a84387cd..828e271e13 100644
--- a/static/styles/night_mode.scss
+++ b/static/styles/night_mode.scss
@@ -562,10 +562,6 @@ on a dark background, and don't change the dark labels dark either. */
         border-bottom-color: hsl(211, 16%, 30%) !important;
     }
 
-    .ps__rail-y {
-        background-color: hsl(212, 28%, 18%);
-    }
-
     #bots_lists_navbar .active a {
         color: hsl(0, 0%, 87%);
         background-color: hsl(212, 28%, 18%);
diff --git a/static/styles/portico.scss b/static/styles/portico.scss
index 97aba07539..e6167c4676 100644
--- a/static/styles/portico.scss
+++ b/static/styles/portico.scss
@@ -317,10 +317,6 @@ body {
     outline: none;
 }
 
-.help .sidebar .simplebar-scrollbar {
-    width: 10px;
-}
-
 .app.help .hamburger {
     display: none;
 }
diff --git a/static/styles/reactions.scss b/static/styles/reactions.scss
index 13b3e03d9a..46606e1cdf 100644
--- a/static/styles/reactions.scss
+++ b/static/styles/reactions.scss
@@ -185,7 +185,8 @@
 .emoji-search-results-container {
     padding: 0px;
     position: relative;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
     display: block;
     height: 250px;
     width: 247px;
diff --git a/static/styles/right-sidebar.scss b/static/styles/right-sidebar.scss
index 872862d8c3..81a7a7dfa5 100644
--- a/static/styles/right-sidebar.scss
+++ b/static/styles/right-sidebar.scss
@@ -29,11 +29,6 @@
     list-style-position: inside; /* Draw the bullets inside our box */
 }
 
-#user_presences:hover,
-#group-pms:hover {
-    overflow-y: auto;
-}
-
 #user_presences li {
     overflow: hidden;
     white-space: nowrap;
diff --git a/tools/update-prod-static b/tools/update-prod-static
index 97ec2149ad..a9d986b406 100755
--- a/tools/update-prod-static
+++ b/tools/update-prod-static
@@ -69,7 +69,6 @@ run(['cp', '-R', 'node_modules/katex/dist/fonts',
 
 CSS_FILES = [
     'node_modules/simplebar/dist/simplebar.css',
-    'node_modules/perfect-scrollbar/css/perfect-scrollbar.css',
     'node_modules/flatpickr/dist/flatpickr.css',
     'node_modules/flatpickr/dist/plugins/confirmDate/confirmDate.css',
 ]
diff --git a/tools/webpack.assets.json b/tools/webpack.assets.json
index bd71259f7f..928e247b5f 100644
--- a/tools/webpack.assets.json
+++ b/tools/webpack.assets.json
@@ -5,7 +5,6 @@
     ],
     "archive": [
         "./node_modules/xdate/src/xdate.js",
-        "./node_modules/perfect-scrollbar/dist/perfect-scrollbar.js",
         "./node_modules/handlebars/dist/handlebars.runtime.js",
         "./static/js/archive.js",
         "./static/js/colorspace.js",
@@ -57,7 +56,7 @@
         "./static/third/bootstrap/css/bootstrap.css",
         "./static/third/bootstrap/css/bootstrap-btn.css",
         "./static/third/bootstrap/css/bootstrap-responsive.css",
-        "./node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
+        "./node_modules/simplebar/dist/simplebar.css",
         "./node_modules/font-awesome/css/font-awesome.css",
         "./static/generated/icons/style.css",
         "./node_modules/source-sans-pro/source-sans-pro.css",
diff --git a/tools/webpack.config.ts b/tools/webpack.config.ts
index d45d1013b2..b310bc1728 100644
--- a/tools/webpack.config.ts
+++ b/tools/webpack.config.ts
@@ -123,7 +123,6 @@ export default (env?: string): webpack.Configuration => {
         { path: "../node_modules/blueimp-md5/js/md5.js" },
         { path: "../node_modules/clipboard/dist/clipboard.js", name: "ClipboardJS" },
         { path: "../node_modules/xdate/src/xdate.js", name: "XDate" },
-        { path: "../node_modules/perfect-scrollbar/dist/perfect-scrollbar.js", name: "PerfectScrollbar" },
         { path: "../node_modules/simplebar/dist/simplebar.js"},
         { path: "../static/third/marked/lib/marked.js" },
         { path: "../static/generated/emoji/emoji_codes.js" },
diff --git a/version.py b/version.py
index 55e37ea82e..f9bad91b29 100644
--- a/version.py
+++ b/version.py
@@ -11,4 +11,4 @@ LATEST_RELEASE_ANNOUNCEMENT = "https://blog.zulip.org/2019/03/01/zulip-2-0-relea
 # Typically, adding a dependency only requires a minor version bump, and
 # removing a dependency requires a major version bump.
 
-PROVISION_VERSION = '31.2'
+PROVISION_VERSION = '32.0'
diff --git a/yarn.lock b/yarn.lock
index d38ae4f501..461768f95c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8759,11 +8759,6 @@ pend@~1.2.0:
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
   integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
 
-perfect-scrollbar@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.3.0.tgz#61da56f94b58870d8e0a617bce649cee17d1e3b2"
-  integrity sha512-7Ub8YOvZB5k+pTy0K3LYUDnH9Xl3qvHcclJyIX+AV5UxHxll146iVGq4rtc+848nTDBQq89J7QxKKMA++cTXzQ==
-
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"