options to enable scrollbars and disable sticky headers

src/App.js

@@ -82,6 +82,8 @@ export default {
     layoutType () { return this.$store.state.interface.layoutType },
     privateMode () { return this.$store.state.instance.private },
     reverseLayout () { return this.$store.getters.mergedConfig.sidebarRight },
+    noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
+    showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
     ...mapGetters(['mergedConfig'])
   },
   methods: {

src/App.scss

@@ -59,6 +59,7 @@ nav {
 #content {
   overscroll-behavior-y: none;
   overflow-y: auto;
+  overflow-x: hidden;
   position: sticky;
 }
 
@@ -136,6 +137,19 @@ nav {
       max-height: calc(100vh - var(--navbar-height));
       overflow-y: auto;
       overflow-x: hidden;
+      margin-left: -2em;
+      padding-left: 2.5em;
+
+      &:not(.-show-scrollbar) {
+        scrollbar-width: none;
+        margin-right: -2em;
+        padding-right: 2.5em;
+
+        &::-webkit-scrollbar {
+          display: block;
+          width: 0;
+        }
+      }
 
       .panel-heading.-sticky {
         top: -10px;
@@ -143,6 +157,15 @@ nav {
     }
   }
 
+  &.-no-sticky-headers {
+    .column {
+      .panel-heading.-sticky {
+        position: relative;
+        top: 0;
+      }
+    }
+  }
+
   .column-inner {
     display: grid;
     grid-template-columns: 100%;
@@ -186,10 +209,6 @@ nav {
 
 #content,
 .column.-scrollable {
-  &::-webkit-scrollbar {
-    display: block;
-    width: 0;
-  }
 }
 
 .text-center {

src/App.vue

@@ -13,10 +13,10 @@
     <div
       id="content"
       class="app-layout container"
-      :class="[{ '-reverse': reverseLayout }, '-' + layoutType]"
+      :class="[{ '-reverse': reverseLayout, '-no-sticky-headers': noSticky }, '-' + layoutType]"
     >
       <div class="underlay"/>
-      <div id="sidebar" class="column -scrollable">
+      <div id="sidebar" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }">
         <user-panel />
         <template v-if="layoutType !== 'mobile'">
           <nav-panel />
@@ -40,7 +40,7 @@
         </div>
         <router-view />
       </div>
-      <div id="notifs-column" class="column -scrollable"/>
+      <div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/>
       <media-modal />
     </div>
     <shout-panel

src/components/settings_modal/tabs/general_tab.vue

@@ -60,6 +60,16 @@
             {{ $t('settings.virtual_scrolling') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="disableStickyHeaders">
+            {{ $t('settings.disable_sticky_headers') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="showScrollbars">
+            {{ $t('settings.show_scrollbars') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting
             path="alwaysShowNewPostButton"

src/components/timeline/timeline.js

@@ -91,7 +91,7 @@ const Timeline = {
     const credentials = store.state.users.currentUser.credentials
     const showImmediately = this.timeline.visibleStatuses.length === 0
 
-    scroller().addEventListener('scroll', this.handleScroll)
+    scroller() && scroller().addEventListener('scroll', this.handleScroll)
 
     if (store.state.api.fetchers[this.timelineName]) { return false }
 

src/modules/config.js

@@ -73,6 +73,8 @@ export const defaultState = {
   playVideosInModal: false,
   useOneClickNsfw: false,
   useContainFit: true,
+  disableStickyHeaders: false,
+  showScrollbars: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
   mentionLinkDisplay: undefined, // instance default

src/panel.scss

@@ -28,8 +28,7 @@
 
 .panel-body:empty::before {
   content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
-  display: block;
+  display: block; margin: 1em;
-  margin: 1em;
   text-align: center;
 }