锚点单击事件中vue.js中的水平滚动行为

Question

I am working in vue frame work.I have an issue with scroll behavior , whenever clicking the side menu . In my web application I have side navigation bar towards left side of the screen and the corresponding content panel in the middle of the page . you can check the image i have added.

so whenever i click the side menu , it reaches to the corresponding panel.

The vertical scroll bar is working fine , but I have issues with horizontal scroll bar.

The horizontal scroll bar gets scrolled bit towards middle of the page.

expected behavior

whenever i click. The horizontal scroll should remain always in the left ,

my current code

       scrollBehavior(to, from, savedPosition) {
   if (to.hash) {
     return { selector: to.hash };

   } else if (savedPosition) {
     return savedPosition;
   }
   return { x: 0, y: 0 };
 },

Answer 1

我认为scrollBehavior (to, from, savedPosition)的功能scrollBehavior (to, from, savedPosition)可能会有所帮助。

Answer 2

  if (to.hash) {
  return {
    selector: to.hash,
    offset: { x: the main content  element value in my case it was 204.2,  y:0 },
  };
  } else if (savedPosition) {
   return savedPosition;
  }
  return { x: 0, y: 0 };
 },

it worked