tocbot - npm Package Compare versions

Comparing version 4.35.3 to 4.36.0

dist/tocbot.cjs

@@ -514,2 +514,12 @@ /******/ (() => { // webpackBootstrap
   headingsOffset: 1,
+  // Enable the URL hash to update with the proper heading ID as
+  // a user scrolls the page.
+  enableUrlHashUpdateOnScroll: false,
+  // type of scroll handler to use. to make scroll event not too rapid.
+  // Options are: "debounce" or "throttle"
+  // when set auto , use debounce less than 333ms , other use throttle.
+  // for ios browser can't use history.pushState() more than 100 times per 30 seconds reason
+  scrollHandlerType: "auto",
+  //  scrollHandler delay in ms.
+  scrollHandlerTimeout: 50,
   // Timeout between events firing to make sure it's
@@ -574,5 +584,2 @@ // not too rapid (for performance reasons).
   tocScrollOffset: 30,
-  // Enable the URL hash to update with the proper heading ID as
-  // a user scrolls the page.
-  enableUrlHashUpdateOnScroll: false,
   // Threshold for when bottom mode should be enabled to handle
@@ -695,3 +702,12 @@ // highlighting links that cannot be scrolled to.
   let isClick = false
-  _scrollListener = throttle((e) => {
+  // choose timeout by _options
+  const scrollHandlerTimeout =
+    _options.scrollHandlerTimeout || _options.throttleTimeout // compatible with legacy configurations
+  // choose debounce or throttle
+  // default use debounce when delay is less than 333ms
+  // the reason is ios browser has a limit : can't use history.pushState() more than 100 times per 30 seconds
+  const scrollHandler = (fn, delay) =>
+    getScrollHandler(fn, delay, _options.scrollHandlerType)
+
+  _scrollListener = scrollHandler((e) => {
     _buildHtml.updateToc(_headingsArray, e)
@@ -706,11 +722,8 @@ // Only do this update for normal scrolls and not during clicks.
 
-    const isTop =
-      e?.target?.scrollingElement && e.target.scrollingElement.scrollTop === 0
+    const isTop = e?.target?.scrollingElement?.scrollTop === 0
     if ((e && (e.eventPhase === 0 || e.currentTarget === null)) || isTop) {
       _buildHtml.updateToc(_headingsArray)
-      if (_options.scrollEndCallback) {
-        _options.scrollEndCallback(e)
-      }
+      _options.scrollEndCallback?.(e)
     }
-  }, _options.throttleTimeout)
+  }, scrollHandlerTimeout)
   // Fire it initially to setup the page.
@@ -860,2 +873,35 @@ if (!hasInitialized) {
 
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait` milliseconds
+ * have elapsed since the last time the debounced function was invoked.
+ *
+ * @param {Function} func - The function to debounce.
+ * @param {number} wait - The number of milliseconds to delay.
+ * @returns {Function} - Returns the new debounced function.
+ */
+function debounce(func, wait) {
+  let timeout
+  return (...args) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => func.apply(this, args), wait)
+  }
+}
+
+/**
+ * Creates a scroll handler with specified timeout strategy
+ * @param {number} timeout - Delay duration in milliseconds
+ * @param {'debounce'|'throttle'|'auto'} type - Strategy type for scroll handling
+ * @returns {Function} Configured scroll handler function
+ */
+function getScrollHandler(func, timeout, type = "auto") {
+  switch (type) {
+    case "debounce":
+      return debounce(func, timeout)
+    case "throttle":
+      return throttle(func, timeout)
+    default:
+      return timeout < 334 ? debounce(func, timeout) : throttle(func, timeout)
+  }
+}
+
 function getContentElement(options) {
@@ -862,0 +908,0 @@ try {

dist/tocbot.js

@@ -514,2 +514,12 @@ /******/ (() => { // webpackBootstrap
   headingsOffset: 1,
+  // Enable the URL hash to update with the proper heading ID as
+  // a user scrolls the page.
+  enableUrlHashUpdateOnScroll: false,
+  // type of scroll handler to use. to make scroll event not too rapid.
+  // Options are: "debounce" or "throttle"
+  // when set auto , use debounce less than 333ms , other use throttle.
+  // for ios browser can't use history.pushState() more than 100 times per 30 seconds reason
+  scrollHandlerType: "auto",
+  //  scrollHandler delay in ms.
+  scrollHandlerTimeout: 50,
   // Timeout between events firing to make sure it's
@@ -574,5 +584,2 @@ // not too rapid (for performance reasons).
   tocScrollOffset: 30,
-  // Enable the URL hash to update with the proper heading ID as
-  // a user scrolls the page.
-  enableUrlHashUpdateOnScroll: false,
   // Threshold for when bottom mode should be enabled to handle
@@ -695,3 +702,12 @@ // highlighting links that cannot be scrolled to.
   let isClick = false
-  _scrollListener = throttle((e) => {
+  // choose timeout by _options
+  const scrollHandlerTimeout =
+    _options.scrollHandlerTimeout || _options.throttleTimeout // compatible with legacy configurations
+  // choose debounce or throttle
+  // default use debounce when delay is less than 333ms
+  // the reason is ios browser has a limit : can't use history.pushState() more than 100 times per 30 seconds
+  const scrollHandler = (fn, delay) =>
+    getScrollHandler(fn, delay, _options.scrollHandlerType)
+
+  _scrollListener = scrollHandler((e) => {
     _buildHtml.updateToc(_headingsArray, e)
@@ -706,11 +722,8 @@ // Only do this update for normal scrolls and not during clicks.
 
-    const isTop =
-      e?.target?.scrollingElement && e.target.scrollingElement.scrollTop === 0
+    const isTop = e?.target?.scrollingElement?.scrollTop === 0
     if ((e && (e.eventPhase === 0 || e.currentTarget === null)) || isTop) {
       _buildHtml.updateToc(_headingsArray)
-      if (_options.scrollEndCallback) {
-        _options.scrollEndCallback(e)
-      }
+      _options.scrollEndCallback?.(e)
     }
-  }, _options.throttleTimeout)
+  }, scrollHandlerTimeout)
   // Fire it initially to setup the page.
@@ -860,2 +873,35 @@ if (!hasInitialized) {
 
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait` milliseconds
+ * have elapsed since the last time the debounced function was invoked.
+ *
+ * @param {Function} func - The function to debounce.
+ * @param {number} wait - The number of milliseconds to delay.
+ * @returns {Function} - Returns the new debounced function.
+ */
+function debounce(func, wait) {
+  let timeout
+  return (...args) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => func.apply(this, args), wait)
+  }
+}
+
+/**
+ * Creates a scroll handler with specified timeout strategy
+ * @param {number} timeout - Delay duration in milliseconds
+ * @param {'debounce'|'throttle'|'auto'} type - Strategy type for scroll handling
+ * @returns {Function} Configured scroll handler function
+ */
+function getScrollHandler(func, timeout, type = "auto") {
+  switch (type) {
+    case "debounce":
+      return debounce(func, timeout)
+    case "throttle":
+      return throttle(func, timeout)
+    default:
+      return timeout < 334 ? debounce(func, timeout) : throttle(func, timeout)
+  }
+}
+
 function getContentElement(options) {
@@ -862,0 +908,0 @@ try {

dist/tocbot.min.js

@@ -1,1 +0,1 @@
-(()=>{"use strict";var e={d:(t,n)=>{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function n(e){const t=[].forEach,n=[].some,o="undefined"!=typeof window&&document.body,l=" ";let r,s=!0,i=0;function c(n,o){const r=o.appendChild(function(n){const o=document.createElement("li"),r=document.createElement("a");return e.listItemClass&&o.setAttribute("class",e.listItemClass),e.onClick&&(r.onclick=e.onClick),e.includeTitleTags&&r.setAttribute("title",n.textContent),e.includeHtml&&n.childNodes.length?t.call(n.childNodes,(e=>{r.appendChild(e.cloneNode(!0))})):r.textContent=n.textContent,r.setAttribute("href",`${e.basePath}#${n.id}`),r.setAttribute("class",`${e.linkClass+l}node-name--${n.nodeName}${l}${e.extraLinkClasses}`),o.appendChild(r),o}(n));if(n.children.length){const e=a(n.isCollapsed);n.children.forEach((t=>{c(t,e)})),r.appendChild(e)}}function a(t){const n=e.orderedList?"ol":"ul",o=document.createElement(n);let r=e.listClass+l+e.extraListClasses;return t&&(r=r+l+e.collapsibleClass,r=r+l+e.isCollapsedClass),o.setAttribute("class",r),o}function d(t){let n=0;return null!==t&&(n=t.offsetTop,e.hasInnerContainers&&(n+=d(t.offsetParent))),n}function u(e,t){return e&&e.className!==t&&(e.className=t),e}function f(t){return t&&-1!==t.className.indexOf(e.collapsibleClass)&&-1!==t.className.indexOf(e.isCollapsedClass)?(u(t,t.className.replace(l+e.isCollapsedClass,"")),f(t.parentNode.parentNode)):t}function m(t){const n=p(),o=document?.getElementById(t);return o.offsetTop>n.offsetHeight-1.4*n.clientHeight-e.bottomModeThreshold}function h(){const t=p(),n=t.scrollHeight>t.clientHeight,o=g()+t.clientHeight>t.offsetHeight-e.bottomModeThreshold;return n&&o}function p(){let t;return t=e.scrollContainer&&document.querySelector(e.scrollContainer)?document.querySelector(e.scrollContainer):document.documentElement||o,t}function g(){const e=p();return e?.scrollTop||0}function C(t,o=g()){let l;return n.call(t,((n,r)=>d(n)>o+e.headingsOffset+10?(l=t[0===r?r:r-1],!0):r===t.length-1?(l=t[t.length-1],!0):void 0)),l}return{enableTocAnimation:function(){s=!0},disableTocAnimation:function(t){const n=t.target||t.srcElement;"string"==typeof n.className&&-1!==n.className.indexOf(e.linkClass)&&(s=!1)},render:function(e,t){const n=a(!1);if(t.forEach((e=>{c(e,n)})),r=e||r,null!==r)return r.firstChild&&r.removeChild(r.firstChild),0===t.length?r:r.appendChild(n)},updateToc:function(n,o){e.positionFixedSelector&&function(){const t=g(),n=document.querySelector(e.positionFixedSelector);"auto"===e.fixedSidebarOffset&&(e.fixedSidebarOffset=r.offsetTop),t>e.fixedSidebarOffset?-1===n.className.indexOf(e.positionFixedClass)&&(n.className+=l+e.positionFixedClass):n.className=n.className.replace(l+e.positionFixedClass,"")}();const c=n,a=o?.target?.getAttribute?o?.target?.getAttribute("href"):null,d=!(!a||"#"!==a.charAt(0))&&m(a.replace("#",""));if(o&&i<5&&i++,(s||d)&&r&&c.length>0){const n=C(c),o=r.querySelector(`.${e.activeLinkClass}`),s=n.id.replace(/([ #;&,.+*~':"!^$[\]()=>|/\\@])/g,"\\$1"),p=window.location.hash.replace("#","");let g=s;const b=h();a&&d?g=a.replace("#",""):p&&p!==s&&b&&(m(s)||i<=2)&&(g=p);const S=r.querySelector(`.${e.linkClass}[href="${e.basePath}#${g}"]`);if(o===S)return;const y=r.querySelectorAll(`.${e.linkClass}`);t.call(y,(t=>{u(t,t.className.replace(l+e.activeLinkClass,""))}));const v=r.querySelectorAll(`.${e.listItemClass}`);t.call(v,(t=>{u(t,t.className.replace(l+e.activeListItemClass,""))})),S&&-1===S.className.indexOf(e.activeLinkClass)&&(S.className+=l+e.activeLinkClass);const T=S?.parentNode;T&&-1===T.className.indexOf(e.activeListItemClass)&&(T.className+=l+e.activeListItemClass);const w=r.querySelectorAll(`.${e.listClass}.${e.collapsibleClass}`);t.call(w,(t=>{-1===t.className.indexOf(e.isCollapsedClass)&&(t.className+=l+e.isCollapsedClass)})),S?.nextSibling&&-1!==S.nextSibling.className.indexOf(e.isCollapsedClass)&&u(S.nextSibling,S.nextSibling.className.replace(l+e.isCollapsedClass,"")),f(S?.parentNode.parentNode)}},getCurrentlyHighlighting:function(){return s},getTopHeader:C,getScrollTop:g,updateUrlHashForHeader:function(e){const t=g(),n=C(e,t),o=h();if(n&&!(t<5)||o){if(n&&!o){const e=`#${n.id}`;window.location.hash!==e&&window.history.pushState(null,null,e)}}else"#"!==window.location.hash&&""!==window.location.hash&&window.history.pushState(null,null,"#")}}}e.r(t),e.d(t,{_buildHtml:()=>r,_headingsArray:()=>i,_options:()=>d,_parseContent:()=>s,_scrollListener:()=>c,default:()=>C,destroy:()=>f,init:()=>u,refresh:()=>m});const o={tocSelector:".js-toc",tocElement:null,contentSelector:".js-toc-content",contentElement:null,headingSelector:"h1, h2, h3",ignoreSelector:".js-toc-ignore",hasInnerContainers:!1,linkClass:"toc-link",extraLinkClasses:"",activeLinkClass:"is-active-link",listClass:"toc-list",extraListClasses:"",isCollapsedClass:"is-collapsed",collapsibleClass:"is-collapsible",listItemClass:"toc-list-item",activeListItemClass:"is-active-li",collapseDepth:0,scrollSmooth:!0,scrollSmoothDuration:420,scrollSmoothOffset:0,scrollEndCallback:function(e){},headingsOffset:1,throttleTimeout:50,positionFixedSelector:null,positionFixedClass:"is-position-fixed",fixedSidebarOffset:"auto",includeHtml:!1,includeTitleTags:!1,onClick:function(e){},orderedList:!0,scrollContainer:null,skipRendering:!1,headingLabelCallback:!1,ignoreHiddenElements:!1,headingObjectCallback:null,basePath:"",disableTocScrollSync:!1,tocScrollingWrapper:null,tocScrollOffset:30,enableUrlHashUpdateOnScroll:!1,bottomModeThreshold:30};function l(e){var t=e.duration,n=e.offset;if("undefined"!=typeof window&&"undefined"!=typeof location){var o=location.hash?l(location.href):location.href;document.body.addEventListener("click",(function(r){var s;"a"!==(s=r.target).tagName.toLowerCase()||!(s.hash.length>0||"#"===s.href.charAt(s.href.length-1))||l(s.href)!==o&&l(s.href)+"#"!==o||r.target.className.indexOf("no-smooth-scroll")>-1||"#"===r.target.href.charAt(r.target.href.length-2)&&"!"===r.target.href.charAt(r.target.href.length-1)||-1===r.target.className.indexOf(e.linkClass)||function(e,t){var n,o,l=window.pageYOffset,r={duration:t.duration,offset:t.offset||0,callback:t.callback,easing:t.easing||function(e,t,n,o){return(e/=o/2)<1?n/2*e*e+t:-n/2*(--e*(e-2)-1)+t}},s=document.querySelector('[id="'+decodeURI(e).split("#").join("")+'"]')||document.querySelector('[id="'+e.split("#").join("")+'"]'),i="string"==typeof e?r.offset+(e?s&&s.getBoundingClientRect().top||0:-(document.documentElement.scrollTop||document.body.scrollTop)):e,c="function"==typeof r.duration?r.duration(i):r.duration;function a(e){o=e-n,window.scrollTo(0,r.easing(o,l,i,c)),o<c?requestAnimationFrame(a):(window.scrollTo(0,l+i),"function"==typeof r.callback&&r.callback())}requestAnimationFrame((function(e){n=e,a(e)}))}(r.target.hash,{duration:t,offset:n,callback:function(){var e,t;e=r.target.hash,(t=document.getElementById(e.substring(1)))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())}})}),!1)}function l(e){return e.slice(0,e.lastIndexOf("#"))}}let r,s,i,c,a,d={};function u(e){let t=!1;d=function(...e){const t={};for(let n=0;n<e.length;n++){const o=e[n];for(const e in o)h.call(o,e)&&(t[e]=o[e])}return t}(o,e||{}),d.scrollSmooth&&(d.duration=d.scrollSmoothDuration,d.offset=d.scrollSmoothOffset,l(d)),r=n(d),s=function(e){const t=[].reduce;function n(e){return e[e.length-1]}function o(e){return+e.nodeName.toUpperCase().replace("H","")}function l(t){if(!function(e){try{return e instanceof window.HTMLElement||e instanceof window.parent.HTMLElement}catch(t){return e instanceof window.HTMLElement}}(t))return t;if(e.ignoreHiddenElements&&(!t.offsetHeight||!t.offsetParent))return null;const n=t.getAttribute("data-heading-label")||(e.headingLabelCallback?String(e.headingLabelCallback(t.innerText)):(t.innerText||t.textContent).trim()),l={id:t.id,children:[],nodeName:t.nodeName,headingLevel:o(t),textContent:n};return e.includeHtml&&(l.childNodes=t.childNodes),e.headingObjectCallback?e.headingObjectCallback(l,t):l}return{nestHeadingsArray:function(o){return t.call(o,(function(t,o){const r=l(o);return r&&function(t,o){const r=l(t),s=r.headingLevel;let i=o,c=n(i),a=s-(c?c.headingLevel:0);for(;a>0&&(c=n(i),!c||s!==c.headingLevel);)c&&void 0!==c.children&&(i=c.children),a--;s>=e.collapseDepth&&(r.isCollapsed=!0),i.push(r)}(r,t.nest),t}),{nest:[]})},selectHeadings:function(t,n){let o=n;e.ignoreSelector&&(o=n.split(",").map((function(t){return`${t.trim()}:not(${e.ignoreSelector})`})));try{return t.querySelectorAll(o)}catch(e){return console.warn(`Headers not found with selector: ${o}`),null}}}}(d),f();const u=function(e){try{return e.contentElement||document.querySelector(e.contentSelector)}catch(t){return console.warn(`Contents element not found: ${e.contentSelector}`),null}}(d);if(null===u)return;const m=g(d);if(null===m)return;if(i=s.selectHeadings(u,d.headingSelector),null===i)return;const C=s.nestHeadingsArray(i).nest;if(d.skipRendering)return this;r.render(m,C);let b=!1;c=p((e=>{r.updateToc(i,e),!d.disableTocScrollSync&&!b&&function(e){const t=e.tocScrollingWrapper||e.tocElement||document.querySelector(e.tocSelector);if(t&&t.scrollHeight>t.clientHeight){const n=t.querySelector(`.${e.activeListItemClass}`);if(n){const o=n.offsetTop-e.tocScrollOffset;t.scrollTop=o>0?o:0}}}(d),d.enableUrlHashUpdateOnScroll&&t&&r.getCurrentlyHighlighting()&&r.updateUrlHashForHeader(i);const n=e?.target?.scrollingElement&&0===e.target.scrollingElement.scrollTop;(e&&(0===e.eventPhase||null===e.currentTarget)||n)&&(r.updateToc(i),d.scrollEndCallback&&d.scrollEndCallback(e))}),d.throttleTimeout),t||(c(),t=!0),window.onhashchange=window.onscrollend=e=>{c(e)},d.scrollContainer&&document.querySelector(d.scrollContainer)?(document.querySelector(d.scrollContainer).addEventListener("scroll",c,!1),document.querySelector(d.scrollContainer).addEventListener("resize",c,!1)):(document.addEventListener("scroll",c,!1),document.addEventListener("resize",c,!1));let S=null;a=p((e=>{b=!0,d.scrollSmooth&&r.disableTocAnimation(e),r.updateToc(i,e),S&&clearTimeout(S),S=setTimeout((()=>{r.enableTocAnimation()}),d.scrollSmoothDuration),setTimeout((()=>{b=!1}),d.scrollSmoothDuration+100)}),d.throttleTimeout),d.scrollContainer&&document.querySelector(d.scrollContainer)?document.querySelector(d.scrollContainer).addEventListener("click",a,!1):document.addEventListener("click",a,!1)}function f(){const e=g(d);null!==e&&(d.skipRendering||e&&(e.innerHTML=""),d.scrollContainer&&document.querySelector(d.scrollContainer)?(document.querySelector(d.scrollContainer).removeEventListener("scroll",c,!1),document.querySelector(d.scrollContainer).removeEventListener("resize",c,!1),r&&document.querySelector(d.scrollContainer).removeEventListener("click",a,!1)):(document.removeEventListener("scroll",c,!1),document.removeEventListener("resize",c,!1),r&&document.removeEventListener("click",a,!1)))}function m(e){f(),u(e||d)}const h=Object.prototype.hasOwnProperty;function p(e,t,n){let o,l;return t||(t=250),function(...r){const s=n||this,i=+new Date;o&&i<o+t?(clearTimeout(l),l=setTimeout((()=>{o=i,e.apply(s,r)}),t)):(o=i,e.apply(s,r))}}function g(e){try{return e.tocElement||document.querySelector(e.tocSelector)}catch(t){return console.warn(`TOC element not found: ${e.tocSelector}`),null}}const C={_options:d,_buildHtml:r,_parseContent:s,init:u,destroy:f,refresh:m};var b,S;b="undefined"!=typeof global?global:window||global,S=function(e){const n=!!(e&&e.document&&e.document.querySelector&&e.addEventListener);if("undefined"!=typeof window||n)return e.tocbot=t,t},"function"==typeof define&&define.amd?define([],S(b)):"object"==typeof exports?module.exports=S(b):b.tocbot=S(b)})();
+(()=>{"use strict";var e={d:(t,n)=>{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function n(e){const t=[].forEach,n=[].some,o="undefined"!=typeof window&&document.body,l=" ";let r,s=!0,i=0;function c(n,o){const r=o.appendChild(function(n){const o=document.createElement("li"),r=document.createElement("a");return e.listItemClass&&o.setAttribute("class",e.listItemClass),e.onClick&&(r.onclick=e.onClick),e.includeTitleTags&&r.setAttribute("title",n.textContent),e.includeHtml&&n.childNodes.length?t.call(n.childNodes,(e=>{r.appendChild(e.cloneNode(!0))})):r.textContent=n.textContent,r.setAttribute("href",`${e.basePath}#${n.id}`),r.setAttribute("class",`${e.linkClass+l}node-name--${n.nodeName}${l}${e.extraLinkClasses}`),o.appendChild(r),o}(n));if(n.children.length){const e=a(n.isCollapsed);n.children.forEach((t=>{c(t,e)})),r.appendChild(e)}}function a(t){const n=e.orderedList?"ol":"ul",o=document.createElement(n);let r=e.listClass+l+e.extraListClasses;return t&&(r=r+l+e.collapsibleClass,r=r+l+e.isCollapsedClass),o.setAttribute("class",r),o}function d(t){let n=0;return null!==t&&(n=t.offsetTop,e.hasInnerContainers&&(n+=d(t.offsetParent))),n}function u(e,t){return e&&e.className!==t&&(e.className=t),e}function f(t){return t&&-1!==t.className.indexOf(e.collapsibleClass)&&-1!==t.className.indexOf(e.isCollapsedClass)?(u(t,t.className.replace(l+e.isCollapsedClass,"")),f(t.parentNode.parentNode)):t}function m(t){const n=p(),o=document?.getElementById(t);return o.offsetTop>n.offsetHeight-1.4*n.clientHeight-e.bottomModeThreshold}function h(){const t=p(),n=t.scrollHeight>t.clientHeight,o=g()+t.clientHeight>t.offsetHeight-e.bottomModeThreshold;return n&&o}function p(){let t;return t=e.scrollContainer&&document.querySelector(e.scrollContainer)?document.querySelector(e.scrollContainer):document.documentElement||o,t}function g(){const e=p();return e?.scrollTop||0}function C(t,o=g()){let l;return n.call(t,((n,r)=>d(n)>o+e.headingsOffset+10?(l=t[0===r?r:r-1],!0):r===t.length-1?(l=t[t.length-1],!0):void 0)),l}return{enableTocAnimation:function(){s=!0},disableTocAnimation:function(t){const n=t.target||t.srcElement;"string"==typeof n.className&&-1!==n.className.indexOf(e.linkClass)&&(s=!1)},render:function(e,t){const n=a(!1);if(t.forEach((e=>{c(e,n)})),r=e||r,null!==r)return r.firstChild&&r.removeChild(r.firstChild),0===t.length?r:r.appendChild(n)},updateToc:function(n,o){e.positionFixedSelector&&function(){const t=g(),n=document.querySelector(e.positionFixedSelector);"auto"===e.fixedSidebarOffset&&(e.fixedSidebarOffset=r.offsetTop),t>e.fixedSidebarOffset?-1===n.className.indexOf(e.positionFixedClass)&&(n.className+=l+e.positionFixedClass):n.className=n.className.replace(l+e.positionFixedClass,"")}();const c=n,a=o?.target?.getAttribute?o?.target?.getAttribute("href"):null,d=!(!a||"#"!==a.charAt(0))&&m(a.replace("#",""));if(o&&i<5&&i++,(s||d)&&r&&c.length>0){const n=C(c),o=r.querySelector(`.${e.activeLinkClass}`),s=n.id.replace(/([ #;&,.+*~':"!^$[\]()=>|/\\@])/g,"\\$1"),p=window.location.hash.replace("#","");let g=s;const b=h();a&&d?g=a.replace("#",""):p&&p!==s&&b&&(m(s)||i<=2)&&(g=p);const S=r.querySelector(`.${e.linkClass}[href="${e.basePath}#${g}"]`);if(o===S)return;const y=r.querySelectorAll(`.${e.linkClass}`);t.call(y,(t=>{u(t,t.className.replace(l+e.activeLinkClass,""))}));const T=r.querySelectorAll(`.${e.listItemClass}`);t.call(T,(t=>{u(t,t.className.replace(l+e.activeListItemClass,""))})),S&&-1===S.className.indexOf(e.activeLinkClass)&&(S.className+=l+e.activeLinkClass);const v=S?.parentNode;v&&-1===v.className.indexOf(e.activeListItemClass)&&(v.className+=l+e.activeListItemClass);const w=r.querySelectorAll(`.${e.listClass}.${e.collapsibleClass}`);t.call(w,(t=>{-1===t.className.indexOf(e.isCollapsedClass)&&(t.className+=l+e.isCollapsedClass)})),S?.nextSibling&&-1!==S.nextSibling.className.indexOf(e.isCollapsedClass)&&u(S.nextSibling,S.nextSibling.className.replace(l+e.isCollapsedClass,"")),f(S?.parentNode.parentNode)}},getCurrentlyHighlighting:function(){return s},getTopHeader:C,getScrollTop:g,updateUrlHashForHeader:function(e){const t=g(),n=C(e,t),o=h();if(n&&!(t<5)||o){if(n&&!o){const e=`#${n.id}`;window.location.hash!==e&&window.history.pushState(null,null,e)}}else"#"!==window.location.hash&&""!==window.location.hash&&window.history.pushState(null,null,"#")}}}e.r(t),e.d(t,{_buildHtml:()=>r,_headingsArray:()=>i,_options:()=>d,_parseContent:()=>s,_scrollListener:()=>c,default:()=>b,destroy:()=>f,init:()=>u,refresh:()=>m});const o={tocSelector:".js-toc",tocElement:null,contentSelector:".js-toc-content",contentElement:null,headingSelector:"h1, h2, h3",ignoreSelector:".js-toc-ignore",hasInnerContainers:!1,linkClass:"toc-link",extraLinkClasses:"",activeLinkClass:"is-active-link",listClass:"toc-list",extraListClasses:"",isCollapsedClass:"is-collapsed",collapsibleClass:"is-collapsible",listItemClass:"toc-list-item",activeListItemClass:"is-active-li",collapseDepth:0,scrollSmooth:!0,scrollSmoothDuration:420,scrollSmoothOffset:0,scrollEndCallback:function(e){},headingsOffset:1,enableUrlHashUpdateOnScroll:!1,scrollHandlerType:"auto",scrollHandlerTimeout:50,throttleTimeout:50,positionFixedSelector:null,positionFixedClass:"is-position-fixed",fixedSidebarOffset:"auto",includeHtml:!1,includeTitleTags:!1,onClick:function(e){},orderedList:!0,scrollContainer:null,skipRendering:!1,headingLabelCallback:!1,ignoreHiddenElements:!1,headingObjectCallback:null,basePath:"",disableTocScrollSync:!1,tocScrollingWrapper:null,tocScrollOffset:30,bottomModeThreshold:30};function l(e){var t=e.duration,n=e.offset;if("undefined"!=typeof window&&"undefined"!=typeof location){var o=location.hash?l(location.href):location.href;document.body.addEventListener("click",(function(r){var s;"a"!==(s=r.target).tagName.toLowerCase()||!(s.hash.length>0||"#"===s.href.charAt(s.href.length-1))||l(s.href)!==o&&l(s.href)+"#"!==o||r.target.className.indexOf("no-smooth-scroll")>-1||"#"===r.target.href.charAt(r.target.href.length-2)&&"!"===r.target.href.charAt(r.target.href.length-1)||-1===r.target.className.indexOf(e.linkClass)||function(e,t){var n,o,l=window.pageYOffset,r={duration:t.duration,offset:t.offset||0,callback:t.callback,easing:t.easing||function(e,t,n,o){return(e/=o/2)<1?n/2*e*e+t:-n/2*(--e*(e-2)-1)+t}},s=document.querySelector('[id="'+decodeURI(e).split("#").join("")+'"]')||document.querySelector('[id="'+e.split("#").join("")+'"]'),i="string"==typeof e?r.offset+(e?s&&s.getBoundingClientRect().top||0:-(document.documentElement.scrollTop||document.body.scrollTop)):e,c="function"==typeof r.duration?r.duration(i):r.duration;function a(e){o=e-n,window.scrollTo(0,r.easing(o,l,i,c)),o<c?requestAnimationFrame(a):(window.scrollTo(0,l+i),"function"==typeof r.callback&&r.callback())}requestAnimationFrame((function(e){n=e,a(e)}))}(r.target.hash,{duration:t,offset:n,callback:function(){var e,t;e=r.target.hash,(t=document.getElementById(e.substring(1)))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())}})}),!1)}function l(e){return e.slice(0,e.lastIndexOf("#"))}}let r,s,i,c,a,d={};function u(e){let t=!1;d=function(...e){const t={};for(let n=0;n<e.length;n++){const o=e[n];for(const e in o)h.call(o,e)&&(t[e]=o[e])}return t}(o,e||{}),d.scrollSmooth&&(d.duration=d.scrollSmoothDuration,d.offset=d.scrollSmoothOffset,l(d)),r=n(d),s=function(e){const t=[].reduce;function n(e){return e[e.length-1]}function o(e){return+e.nodeName.toUpperCase().replace("H","")}function l(t){if(!function(e){try{return e instanceof window.HTMLElement||e instanceof window.parent.HTMLElement}catch(t){return e instanceof window.HTMLElement}}(t))return t;if(e.ignoreHiddenElements&&(!t.offsetHeight||!t.offsetParent))return null;const n=t.getAttribute("data-heading-label")||(e.headingLabelCallback?String(e.headingLabelCallback(t.innerText)):(t.innerText||t.textContent).trim()),l={id:t.id,children:[],nodeName:t.nodeName,headingLevel:o(t),textContent:n};return e.includeHtml&&(l.childNodes=t.childNodes),e.headingObjectCallback?e.headingObjectCallback(l,t):l}return{nestHeadingsArray:function(o){return t.call(o,(function(t,o){const r=l(o);return r&&function(t,o){const r=l(t),s=r.headingLevel;let i=o,c=n(i),a=s-(c?c.headingLevel:0);for(;a>0&&(c=n(i),!c||s!==c.headingLevel);)c&&void 0!==c.children&&(i=c.children),a--;s>=e.collapseDepth&&(r.isCollapsed=!0),i.push(r)}(r,t.nest),t}),{nest:[]})},selectHeadings:function(t,n){let o=n;e.ignoreSelector&&(o=n.split(",").map((function(t){return`${t.trim()}:not(${e.ignoreSelector})`})));try{return t.querySelectorAll(o)}catch(e){return console.warn(`Headers not found with selector: ${o}`),null}}}}(d),f();const u=function(e){try{return e.contentElement||document.querySelector(e.contentSelector)}catch(t){return console.warn(`Contents element not found: ${e.contentSelector}`),null}}(d);if(null===u)return;const m=C(d);if(null===m)return;if(i=s.selectHeadings(u,d.headingSelector),null===i)return;const b=s.nestHeadingsArray(i).nest;if(d.skipRendering)return this;r.render(m,b);let S=!1;const y=d.scrollHandlerTimeout||d.throttleTimeout;c=function(e,t,n="auto"){switch(n){case"debounce":return g(e,t);case"throttle":return p(e,t);default:return t<334?g(e,t):p(e,t)}}((e=>{r.updateToc(i,e),!d.disableTocScrollSync&&!S&&function(e){const t=e.tocScrollingWrapper||e.tocElement||document.querySelector(e.tocSelector);if(t&&t.scrollHeight>t.clientHeight){const n=t.querySelector(`.${e.activeListItemClass}`);if(n){const o=n.offsetTop-e.tocScrollOffset;t.scrollTop=o>0?o:0}}}(d),d.enableUrlHashUpdateOnScroll&&t&&r.getCurrentlyHighlighting()&&r.updateUrlHashForHeader(i);const n=0===e?.target?.scrollingElement?.scrollTop;(e&&(0===e.eventPhase||null===e.currentTarget)||n)&&(r.updateToc(i),d.scrollEndCallback?.(e))}),y,d.scrollHandlerType),t||(c(),t=!0),window.onhashchange=window.onscrollend=e=>{c(e)},d.scrollContainer&&document.querySelector(d.scrollContainer)?(document.querySelector(d.scrollContainer).addEventListener("scroll",c,!1),document.querySelector(d.scrollContainer).addEventListener("resize",c,!1)):(document.addEventListener("scroll",c,!1),document.addEventListener("resize",c,!1));let T=null;a=p((e=>{S=!0,d.scrollSmooth&&r.disableTocAnimation(e),r.updateToc(i,e),T&&clearTimeout(T),T=setTimeout((()=>{r.enableTocAnimation()}),d.scrollSmoothDuration),setTimeout((()=>{S=!1}),d.scrollSmoothDuration+100)}),d.throttleTimeout),d.scrollContainer&&document.querySelector(d.scrollContainer)?document.querySelector(d.scrollContainer).addEventListener("click",a,!1):document.addEventListener("click",a,!1)}function f(){const e=C(d);null!==e&&(d.skipRendering||e&&(e.innerHTML=""),d.scrollContainer&&document.querySelector(d.scrollContainer)?(document.querySelector(d.scrollContainer).removeEventListener("scroll",c,!1),document.querySelector(d.scrollContainer).removeEventListener("resize",c,!1),r&&document.querySelector(d.scrollContainer).removeEventListener("click",a,!1)):(document.removeEventListener("scroll",c,!1),document.removeEventListener("resize",c,!1),r&&document.removeEventListener("click",a,!1)))}function m(e){f(),u(e||d)}const h=Object.prototype.hasOwnProperty;function p(e,t,n){let o,l;return t||(t=250),function(...r){const s=n||this,i=+new Date;o&&i<o+t?(clearTimeout(l),l=setTimeout((()=>{o=i,e.apply(s,r)}),t)):(o=i,e.apply(s,r))}}function g(e,t){let n;return(...o)=>{clearTimeout(n),n=setTimeout((()=>e.apply(this,o)),t)}}function C(e){try{return e.tocElement||document.querySelector(e.tocSelector)}catch(t){return console.warn(`TOC element not found: ${e.tocSelector}`),null}}const b={_options:d,_buildHtml:r,_parseContent:s,init:u,destroy:f,refresh:m};var S,y;S="undefined"!=typeof global?global:window||global,y=function(e){const n=!!(e&&e.document&&e.document.querySelector&&e.addEventListener);if("undefined"!=typeof window||n)return e.tocbot=t,t},"function"==typeof define&&define.amd?define([],y(S)):"object"==typeof exports?module.exports=y(S):S.tocbot=y(S)})();

index.d.ts

@@ -21,3 +21,3 @@ export default tocbot
     ignoreSelector?: string
-    // For headings inside relative or absolute positioned 
+    // For headings inside relative or absolute positioned
     // containers within content.
@@ -62,2 +62,12 @@ hasInnerContainers?: boolean
     headingsOffset?: number
+    // Enable the URL hash to update with the proper heading ID as
+    // a user scrolls the page.
+    enableUrlHashUpdateOnScroll?: boolean
+    // type of scroll handler to use. to make scroll event not too rapid.
+    // Options are: "debounce" or "throttle"
+    // when set auto , use debounce less than 333ms , other use throttle.
+    // for ios browser can't use history.pushState() more than 100 times per 30 seconds reason
+    scrollHandlerType?: "auto" | "debounce" | "throttle" 
+    //  scrollHandler delay in ms.
+    scrollHandlerTimeout: number
     // Timeout between events firing to make sure it's
@@ -120,5 +130,2 @@ // not too rapid (for performance reasons).
     tocScrollOffset?: number
-    // Enable the URL hash to update with the proper heading ID as
-    // a user scrolls the page.
-    enableUrlHashUpdateOnScroll?: boolean
     // Threshold for when bottom mode should be enabled to handle
@@ -125,0 +132,0 @@ // highlighting links that cannot be scrolled to.

package.json

 {
   "name": "tocbot",
-  "version": "4.35.3",
+  "version": "4.36.0",
   "description": "Generate a table of contents based on the heading structure of a html document.",
@@ -5,0 +5,0 @@ "main": "./dist/tocbot.cjs",

README.md

@@ -141,115 +141,125 @@ <h1 class="dn">
 // Where to render the table of contents.
-tocSelector: '.js-toc',
-// Or, you can pass in a DOM node instead
-tocElement: null,
-// Where to grab the headings to build the table of contents.
-contentSelector: '.js-toc-content',
-// Or, you can pass in a DOM node instead
-contentElement: null,
-// Which headings to grab inside of the contentSelector element.
-headingSelector: 'h1, h2, h3',
-// Headings that match the ignoreSelector will be skipped.
-ignoreSelector: '.js-toc-ignore',
-// For headings inside relative or absolute positioned
-// containers within content.
-hasInnerContainers: false,
-// Main class to add to links.
-linkClass: 'toc-link',
-// Extra classes to add to links.
-extraLinkClasses: '',
-// Class to add to active links,
-// the link corresponding to the top most heading on the page.
-activeLinkClass: 'is-active-link',
-// Main class to add to lists.
-listClass: 'toc-list',
-// Extra classes to add to lists.
-extraListClasses: '',
-// Class that gets added when a list should be collapsed.
-isCollapsedClass: 'is-collapsed',
-// Class that gets added when a list should be able
-// to be collapsed but isn't necessarily collapsed.
-collapsibleClass: 'is-collapsible',
-// Class to add to list items.
-listItemClass: 'toc-list-item',
-// Class to add to active list items.
-activeListItemClass: 'is-active-li',
-// How many heading levels should not be collapsed.
-// For example, number 6 will show everything since
-// there are only 6 heading levels and number 0 will collapse them all.
-// The sections that are hidden will open
-// and close as you scroll to headings within them.
-collapseDepth: 0,
-// Smooth scrolling enabled.
-scrollSmooth: true,
-// Smooth scroll duration.
-scrollSmoothDuration: 420,
-// Smooth scroll offset.
-scrollSmoothOffset: 0,
-// Callback for scroll end.
-scrollEndCallback: function (e) {},
-// Headings offset between the headings and the top of
-// the document (this is meant for minor adjustments).
-headingsOffset: 1,
-// Timeout between events firing to make sure it's
-// not too rapid (for performance reasons).
-throttleTimeout: 50,
-// Element to add the positionFixedClass to.
-positionFixedSelector: null,
-// Fixed position class to add to make sidebar fixed after scrolling
-// down past the fixedSidebarOffset.
-positionFixedClass: 'is-position-fixed',
-// fixedSidebarOffset can be any number but by default is set
-// to auto which sets the fixedSidebarOffset to the sidebar
-// element's offsetTop from the top of the document on init.
-fixedSidebarOffset: 'auto',
-// includeHtml can be set to true to include the HTML markup from the
-// heading node instead of just including the innerText.
-includeHtml: false,
-// includeTitleTags automatically sets the html title tag of the link
-// to match the title. This can be useful for SEO purposes or
-// when truncating titles.
-includeTitleTags: false,
-// onclick function to apply to all links in toc. will be called with
-// the event as the first parameter, and this can be used to stop,
-// propagation, prevent default or perform action
-onClick: function (e) {},
-// orderedList can be set to false to generate unordered lists (ul)
-// instead of ordered lists (ol)
-orderedList: true,
-// If there is a fixed article scroll container, set to calculate offset.
-scrollContainer: null,
-// prevent ToC DOM rendering if it's already rendered by an external system.
-skipRendering: false,
-// Optional callback to change heading labels.
-// For example it can be used to cut down and put ellipses on multiline headings you deem too long.
-// Called each time a heading is parsed. Expects a string and returns the modified label to display.
-// Additionally, the attribute `data-heading-label` may be used on a heading to specify
-// a shorter string to be used in the TOC.
-// function (string) => string
-headingLabelCallback: false,
-// ignore headings that are hidden in DOM
-ignoreHiddenElements: false,
-// Optional callback to modify properties of parsed headings.
-// The heading element is passed in node parameter and information
-// parsed by default parser is provided in obj parameter.
-// Function has to return the same or modified obj.
-// The heading will be excluded from TOC if nothing is returned.
-// function (object, HTMLElement) => object | void
-headingObjectCallback: null,
-// Set the base path, useful if you use a `base` tag in `head`.
-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: 30,
-// Enable the URL hash to update with the proper heading ID as
-// a user scrolls the page.
-enableUrlHashUpdateOnScroll: false
+  tocSelector: '.js-toc',
+  // Or, you can pass in a DOM node instead
+  tocElement: null,
+  // Where to grab the headings to build the table of contents.
+  contentSelector: '.js-toc-content',
+  // Or, you can pass in a DOM node instead
+  contentElement: null,
+  // Which headings to grab inside of the contentSelector element.
+  headingSelector: 'h1, h2, h3',
+  // Headings that match the ignoreSelector will be skipped.
+  ignoreSelector: '.js-toc-ignore',
+  // For headings inside relative or absolute positioned
+  // containers within content.
+  hasInnerContainers: false,
+  // Main class to add to links.
+  linkClass: 'toc-link',
+  // Extra classes to add to links.
+  extraLinkClasses: '',
+  // Class to add to active links,
+  // the link corresponding to the top most heading on the page.
+  activeLinkClass: 'is-active-link',
+  // Main class to add to lists.
+  listClass: 'toc-list',
+  // Extra classes to add to lists.
+  extraListClasses: '',
+  // Class that gets added when a list should be collapsed.
+  isCollapsedClass: 'is-collapsed',
+  // Class that gets added when a list should be able
+  // to be collapsed but isn't necessarily collapsed.
+  collapsibleClass: 'is-collapsible',
+  // Class to add to list items.
+  listItemClass: 'toc-list-item',
+  // Class to add to active list items.
+  activeListItemClass: 'is-active-li',
+  // How many heading levels should not be collapsed.
+  // For example, number 6 will show everything since
+  // there are only 6 heading levels and number 0 will collapse them all.
+  // The sections that are hidden will open
+  // and close as you scroll to headings within them.
+  collapseDepth: 0,
+  // Smooth scrolling enabled.
+  scrollSmooth: true,
+  // Smooth scroll duration.
+  scrollSmoothDuration: 420,
+  // Smooth scroll offset.
+  scrollSmoothOffset: 0,
+  // Callback for scroll end.
+  scrollEndCallback: function (e) {},
+  // Headings offset between the headings and the top of
+  // the document (this is meant for minor adjustments).
+  headingsOffset: 1,
+  // Enable the URL hash to update with the proper heading ID as
+  // a user scrolls the page.
+  enableUrlHashUpdateOnScroll: false,
+  // type of scroll handler to use. to make scroll event not too rapid.
+  // Options are: "debounce" or "throttle"
+  // when set auto , use debounce less than 333ms , other use throttle.
+  // for ios browser can't use history.pushState() more than 100 times per 30 seconds reason
+  scrollHandlerType: 'auto',
+  //  scrollHandler delay in ms.
+  scrollHandlerTimeout: 50,
+  // Timeout between events firing to make sure it's
+  // not too rapid (for performance reasons).
+  throttleTimeout: 50,
+  // Element to add the positionFixedClass to.
+  positionFixedSelector: null,
+  // Fixed position class to add to make sidebar fixed after scrolling
+  // down past the fixedSidebarOffset.
+  positionFixedClass: 'is-position-fixed',
+  // fixedSidebarOffset can be any number but by default is set
+  // to auto which sets the fixedSidebarOffset to the sidebar
+  // element's offsetTop from the top of the document on init.
+  fixedSidebarOffset: 'auto',
+  // includeHtml can be set to true to include the HTML markup from the
+  // heading node instead of just including the innerText.
+  includeHtml: false,
+  // includeTitleTags automatically sets the html title tag of the link
+  // to match the title. This can be useful for SEO purposes or
+  // when truncating titles.
+  includeTitleTags: false,
+  // onclick function to apply to all links in toc. will be called with
+  // the event as the first parameter, and this can be used to stop,
+  // propagation, prevent default or perform action
+  onClick: function (e) {},
+  // orderedList can be set to false to generate unordered lists (ul)
+  // instead of ordered lists (ol)
+  orderedList: true,
+  // If there is a fixed article scroll container, set to calculate offset.
+  scrollContainer: null,
+  // prevent ToC DOM rendering if it's already rendered by an external system.
+  skipRendering: false,
+  // Optional callback to change heading labels.
+  // For example it can be used to cut down and put ellipses on multiline headings you deem too long.
+  // Called each time a heading is parsed. Expects a string and returns the modified label to display.
+  // Additionally, the attribute `data-heading-label` may be used on a heading to specify
+  // a shorter string to be used in the TOC.
+  // function (string) => string
+  headingLabelCallback: false,
+  // ignore headings that are hidden in DOM
+  ignoreHiddenElements: false,
+  // Optional callback to modify properties of parsed headings.
+  // The heading element is passed in node parameter and information
+  // parsed by default parser is provided in obj parameter.
+  // Function has to return the same or modified obj.
+  // The heading will be excluded from TOC if nothing is returned.
+  // function (object, HTMLElement) => object | void
+  headingObjectCallback: null,
+  // Set the base path, useful if you use a `base` tag in `head`.
+  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: 30,
+  // Threshold for when bottom mode should be enabled to handle
+  // highlighting links that cannot be scrolled to.
+  bottomModeThreshold: 30,
 ```
@@ -256,0 +266,0 @@

src/js/default-options.js

@@ -54,2 +54,12 @@ export default {
   headingsOffset: 1,
+  // Enable the URL hash to update with the proper heading ID as
+  // a user scrolls the page.
+  enableUrlHashUpdateOnScroll: false,
+  // type of scroll handler to use. to make scroll event not too rapid.
+  // Options are: "debounce" or "throttle"
+  // when set auto , use debounce less than 333ms , other use throttle.
+  // for ios browser can't use history.pushState() more than 100 times per 30 seconds reason
+  scrollHandlerType: "auto",
+  //  scrollHandler delay in ms.
+  scrollHandlerTimeout: 50,
   // Timeout between events firing to make sure it's
@@ -114,5 +124,2 @@ // not too rapid (for performance reasons).
   tocScrollOffset: 30,
-  // Enable the URL hash to update with the proper heading ID as
-  // a user scrolls the page.
-  enableUrlHashUpdateOnScroll: false,
   // Threshold for when bottom mode should be enabled to handle
@@ -119,0 +126,0 @@ // highlighting links that cannot be scrolled to.

src/js/index-esm.js

@@ -87,3 +87,12 @@ /* eslint no-var: off */
   let isClick = false
-  _scrollListener = throttle((e) => {
+  // choose timeout by _options
+  const scrollHandlerTimeout =
+    _options.scrollHandlerTimeout || _options.throttleTimeout // compatible with legacy configurations
+  // choose debounce or throttle
+  // default use debounce when delay is less than 333ms
+  // the reason is ios browser has a limit : can't use history.pushState() more than 100 times per 30 seconds
+  const scrollHandler = (fn, delay) =>
+    getScrollHandler(fn, delay, _options.scrollHandlerType)
+
+  _scrollListener = scrollHandler((e) => {
     _buildHtml.updateToc(_headingsArray, e)
@@ -98,11 +107,8 @@ // Only do this update for normal scrolls and not during clicks.
 
-    const isTop =
-      e?.target?.scrollingElement && e.target.scrollingElement.scrollTop === 0
+    const isTop = e?.target?.scrollingElement?.scrollTop === 0
     if ((e && (e.eventPhase === 0 || e.currentTarget === null)) || isTop) {
       _buildHtml.updateToc(_headingsArray)
-      if (_options.scrollEndCallback) {
-        _options.scrollEndCallback(e)
-      }
+      _options.scrollEndCallback?.(e)
     }
-  }, _options.throttleTimeout)
+  }, scrollHandlerTimeout)
   // Fire it initially to setup the page.
@@ -252,2 +258,35 @@ if (!hasInitialized) {
 
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait` milliseconds
+ * have elapsed since the last time the debounced function was invoked.
+ *
+ * @param {Function} func - The function to debounce.
+ * @param {number} wait - The number of milliseconds to delay.
+ * @returns {Function} - Returns the new debounced function.
+ */
+function debounce(func, wait) {
+  let timeout
+  return (...args) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => func.apply(this, args), wait)
+  }
+}
+
+/**
+ * Creates a scroll handler with specified timeout strategy
+ * @param {number} timeout - Delay duration in milliseconds
+ * @param {'debounce'|'throttle'|'auto'} type - Strategy type for scroll handling
+ * @returns {Function} Configured scroll handler function
+ */
+function getScrollHandler(func, timeout, type = "auto") {
+  switch (type) {
+    case "debounce":
+      return debounce(func, timeout)
+    case "throttle":
+      return throttle(func, timeout)
+    default:
+      return timeout < 334 ? debounce(func, timeout) : throttle(func, timeout)
+  }
+}
+
 function getContentElement(options) {
@@ -254,0 +293,0 @@ try {

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

AI-detected potential code anomaly

Supply chain risk

AI has identified unusual behaviors that may pose a security risk.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

175007

4.12%

Lines of code

3876

3.64%

Number of lines in readme file

339

3.04%

Worsened metrics

Number of low supply chain risk alerts

21

31.25%

No dependency changes