3

I am using Sitecore 9.3 SXA, wherefrom main page on button click I am redirecting to the video page where we have SXA Tab component below the video. Upon redirecting, the page is getting scrolled to the bottom where the tab is.

I have debugged the tab js, component-tabs, found that when if condition in the below code is hitting, the page is getting auto scrolled to the component as the tab-heading is having some scroll height and scroll width property. If I try by changing or removing the "tab-scrollable" class in the js, the tabs are not functioning.

api.initInstance = function(component) {
   var $tabModule = component.find(".tabs-inner");
   if (component.hasClass("tabs-scrollable")) {
       tabsScrollable(component);
      } 

Is there any way to restrict the auto-scroll?

Thanks in advance

2 Answers 2

2

Got the fix for my issue. Basically in original js for tabs line number 247 was causing the auto scroll. So added an unique class ('dummy-focus' here) in the top container of page and added the script

if(document.getElementsByClassName('dummy-focus')[0])
        {
            const element = document.getElementsByClassName('dummy-focus')[0];
            element.scrollIntoView();
        }

after $tabNav.first("li").focus(); (line 247)

2

The above solution from Tabbuu is not supported by safari, using code from here https://stackoverflow.com/questions/45098593/mobile-safari-scrollintoview-doesnt-work I was able to update it to be supported by safari as follows:

const element = document.getElementsByClassName('dummy-focus')[0];
let scrollTop = window.pageYOffset || element.scrollTop

const finalOffset = element.getBoundingClientRect().top + scrollTop

window.parent.scrollTo({
    top: finalOffset,
    behavior: 'instant'
})    

If this doesn't work add a polyfill for preventScroll from here: https://github.com/calvellido/focus-options-polyfill/blob/master/index.js Then update the component-tabs.js to use prevent scroll as so

$tabNav.first("li").focus({ preventScroll: true });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.