Scroller not working in tablet

[Muzammil Majeed]

hey,
In my application router header is scrolling on desktop pc or laptop using mouse. But my application is for sales persons which will use application on tablets. I'm testing on 10 inch width tablet and it is not working via using finger.
Please make it possible to scroll using fingers in tablets.

[bhuh12]

Can you provide the browser's navigator.userAgent?
Whether swiping left or right will trigger the browser's back and forward actions?

[Muzammil Majeed]

My chrome version is up to date in both my pc and tablet. But it is still not working in tablet.
chrome version = Version 87.0.4280.88 (Official Build) (64-bit) for pc
tablet version = Version 87.0.4280.101 (Official Build) (64-bit)
navigator.userAgent
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36

[bhuh12]

This doesn’t look like a tablet useragent.
https://bhuh12.github.io/vue-router-tab/demo/
Can the problem be reproduced on the Demo？

[Muzammil Majeed]

I did not changed any configuration of the package except for the css. I also checked by installing it again but tabs are not scrolling on tablet using touch. It is working on a mobile devices but not on tablet. Im using basic configuration of a package

this is what im getting by detecting my device. Screenshot attached below shows the user agent of a tablet.

[bhuh12]

Is this an Android tablet?
The user agent did not provide enough information to distinguish this is a tablet device.

Get the width of the browser scroll bar, if the width is 0, we will recognize the current device as a mobile device.

Originally posted by @bhuh12 in #99 (comment)

[bhuh12]

Can these codes solve the problem?

[Muzammil Majeed]

Im Really sorry for the late reply.
I have placed the above codes in my app.vue file but it is giving errors. Can you please tell where do I have to writes these codes if not in app.vue

[Muzammil Majeed]

I have tested this application on two tablets

1. dtab d-01h huawei
2. Sony Xperia Tablet Z LTE

I also created a small project for you on sandbox
test app

And please also let me know about the above codes.

Thanks.

[bhuh12]

https://codesandbox.io/s/eloquent-forest-ptjx2?file=/src/components/home.vue

https://ptjx2.csb.app/

<template>
  <div class="hello">
    <router-tab lang="en" />
  </div>
</template>

<script>
function getScrollbarWidth() {
  const div = document.createElement("div");
  div.style.cssText = "width: 100px; height: 100px;overflow-y: scroll";
  document.body.appendChild(div);
  const scrollbarWidth = div.offsetWidth - div.clientWidth;
  div.parentElement.removeChild(div);
  return scrollbarWidth;
}

export default {
  mounted() {
    const isMobile = !getScrollbarWidth();
    if (isMobile) {
      const scroller = document.querySelector(".router-tab__scroll-container");
      scroller && scroller.classList.add("is-mobile");
    }
    console.log("getScrollbarWidth", getScrollbarWidth());
  },
};
</script>

[Muzammil Majeed]

Scroller is now working.
Thank You

[bhuh12]

The code to fix the problem has been released to v1.2.3. Please update and verify.

Changelog:
https://bhuh12.github.io/vue-router-tab/guide/changelog.html

[Muzammil Majeed]

Yes, it is working.