Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-5379

Floating scrollbar prevent anchornav from scrolling

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Normal Normal
    • 10.0.0, 9.6.4
    • 10.0.0, 9.6.3
    • None
    • Security Level: Jimmy
    • None
    • Firefox on windows 11 with floating scrollbars, Safari on on mac with floating scrollbar

       

      Steps to Reproduce

      Run fiddle on a browser with floating scrollbars (Firefox on windows 11 with floating scrollbars, Safari on on mac with floating scrollbar)

      https://zkfiddle.org/sample/spblbu/32-Anchornav

      Click link

      Current Result

       Anchor doesn't scroll

      Expected Result

       Anchor scrolls

      Debug Information

       Scroll is prevented by navbar _scrollIntoViewTop

      scrollbarWidth = outer.offsetWidth - borderWidth - outer.clientWidth;198                if (scrollbarWidth == 0) return offset;
      

      Workaround

         	<script><![CDATA[ 
      		zk.afterLoad("zkmax.nav", function () {
      		    var _xAnchornav = {};
      		    zk.override(zkmax.nav.Anchornav.prototype, _xAnchornav, {
      		        _scrollIntoViewTop(outer, inner, offset) {
      		            if (outer && inner) {
      		                if (outer == document) return offset;
      		                let newScrollTop = -1;
      		                if (outer != document.body) {
      		                    //check if outer has vertical scrollbar
      		                    const borderWidth = Math.round(jq.css(outer, 'borderLeftWidth', true))
      		                        + Math.round(jq.css(outer, 'borderRightWidth', true)),
      		                        scrollbarWidth = outer.offsetWidth - borderWidth - outer.clientWidth;
      		                    const toOuterOffset = jq(inner).offset().top - jq(outer).offset().top;
      		                    if (toOuterOffset == 0) return offset; // in the view top of outer
      
      		                    newScrollTop = outer.scrollTop + toOuterOffset;
      		                    offset = offset - toOuterOffset;
      		                } else {
      		                    outer = zk.safari ? 'body' : 'html';
      		                    newScrollTop = jq(outer).scrollTop() + offset;
      		                    const maxScrollTop = jq(document).height() - jq(window).height();
      		                    if (newScrollTop > maxScrollTop) newScrollTop = maxScrollTop;
      		                    offset = 0;
      		                }
      		                if (jq(outer)[0].scrollTop != newScrollTop)
      		                    jq(outer).animate({
      		                        scrollTop: newScrollTop
      		                    }, zk(this).getAnimationSpeed(500));
      		                return offset;
      		            }
      		        }
      		     });
      		});
      	]]></script>
      

            gordonhsu gordonhsu
            MDuchemin MDuchemin
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved: