add option for toc scroll wrapper to be set to another element.

README.md

@@ -40,7 +40,7 @@ OR
 Include the script at the bottom of the page before the closing body tag.
 
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.27.4/tocbot.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.30.0/tocbot.min.js"></script>
 ```
 
 
@@ -49,7 +49,7 @@ Include the script at the bottom of the page before the closing body tag.
 CSS is used for expanding & collapsing groupings and some basic styling.
 
 ```html
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.27.4/tocbot.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.30.0/tocbot.css">
 ```
 
 OR
@@ -240,6 +240,11 @@ basePath: '',
 // Only takes affect when `tocSelector` is scrolling,
 // keep the toc scroll position in sync with the content.
 disableTocScrollSync: false,
+// If this is null then just use `tocElement` or `tocSelector` instead
+// assuming `disableTocScrollSync` is set to false. This allows for
+// scrolling an outer element (like a nav panel w/ search) containing the toc.
+// Please pass an element, not a selector here.
+tocScrollingWrapper: null,
 // Offset for the toc scroll (top) position when scrolling the page.
 // Only effective if `disableTocScrollSync` is false.
 tocScrollOffset: 0,

dist/tocbot.cjs

@@ -457,6 +457,10 @@ __webpack_require__.r(__webpack_exports__);
   // Only takes affect when `tocSelector` is scrolling,
   // keep the toc scroll position in sync with the content.
   disableTocScrollSync: false,
+  // If this is null then just use `tocElement` or `tocSelector` instead
+  // assuming `disableTocScrollSync` is set to false. This allows for
+  // scrolling an outer element (like a nav panel w/ search) containing the toc.
+  tocScrollingWrapper: null,
   // Offset for the toc scroll (top) position when scrolling the page.
   // Only effective if `disableTocScrollSync` is false.
   tocScrollOffset: 0,
@@ -1075,21 +1079,19 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (/* binding */ updateTocScroll)
 /* harmony export */ });
-/* eslint no-var: off */
-
 const SCROLL_LEEWAY = 30
 function updateTocScroll (options) {
-  var toc = options.tocElement || document.querySelector(options.tocSelector)
+  const toc = options.tocScrollingWrapper || options.tocElement || document.querySelector(options.tocSelector)
   if (toc && toc.scrollHeight > toc.clientHeight) {
-    var activeItem = toc.querySelector('.' + options.activeListItemClass)
+    const activeItem = toc.querySelector(`.${options.activeListItemClass}`)
     if (activeItem) {
       // Determine container top and bottom
-      var cTop = toc.scrollTop
-      var cBottom = cTop + toc.clientHeight
+      const cTop = toc.scrollTop
+      const cBottom = cTop + toc.clientHeight
 
       // Determine element top and bottom
-      var eTop = activeItem.offsetTop
-      var eBottom = eTop + activeItem.clientHeight
+      const eTop = activeItem.offsetTop
+      const eBottom = eTop + activeItem.clientHeight
 
       // Check if out of view
       // Above scroll view

src/js/default-options.js

@@ -102,6 +102,10 @@ export default {
   // Only takes affect when `tocSelector` is scrolling,
   // keep the toc scroll position in sync with the content.
   disableTocScrollSync: false,
+  // If this is null then just use `tocElement` or `tocSelector` instead
+  // assuming `disableTocScrollSync` is set to false. This allows for
+  // scrolling an outer element (like a nav panel w/ search) containing the toc.
+  tocScrollingWrapper: null,
   // Offset for the toc scroll (top) position when scrolling the page.
   // Only effective if `disableTocScrollSync` is false.
   tocScrollOffset: 0,

src/js/update-toc-scroll.js

@@ -1,18 +1,16 @@
-/* eslint no-var: off */
-
 const SCROLL_LEEWAY = 30
 export default function updateTocScroll (options) {
-  var toc = options.tocElement || document.querySelector(options.tocSelector)
+  const toc = options.tocScrollingWrapper || options.tocElement || document.querySelector(options.tocSelector)
   if (toc && toc.scrollHeight > toc.clientHeight) {
-    var activeItem = toc.querySelector('.' + options.activeListItemClass)
+    const activeItem = toc.querySelector(`.${options.activeListItemClass}`)
     if (activeItem) {
       // Determine container top and bottom
-      var cTop = toc.scrollTop
-      var cBottom = cTop + toc.clientHeight
+      const cTop = toc.scrollTop
+      const cBottom = cTop + toc.clientHeight
 
       // Determine element top and bottom
-      var eTop = activeItem.offsetTop
-      var eBottom = eTop + activeItem.clientHeight
+      const eTop = activeItem.offsetTop
+      const eBottom = eTop + activeItem.clientHeight
 
       // Check if out of view
       // Above scroll view