Anchor Tags not working with horizontal scrolling

[nzmitch]

Checks

• Not a duplicate.

Version

^8.8.1

Description

I think I've found a bug when it comes to horizontal scrolling and anchor tags.

https://jsbin.com/romofifado/1/edit?html,css,js,output

I've reproduced the bug above.

#target doesn't jump to 001.

Steps to Reproduce

Horizontal scrolling on my website uses

.wrapper {
  display: flex;
  flex-direction: row;
  max-width: 100vw;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  object-fit: cover;
}

.outer-wrapper {
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-y: hidden;
  overflow-x: hidden;
  position: absolute;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

Online Demo

https://jsbin.com/romofifado/1/edit?html,css,js,output

[frussane]

@nzmitch did you manage to make it work?

[idiotWu]

I guess you have to swap x and y when rotating the scrolling area by 90 degrees because the coordinate system has been changed. More generally, we could have a plugin to negate the rotation by transforming the scrolling delta (applying trigonometric functions.)

@sadeghbarati I believe this is not a bug, but I don’t have time to validate my idea at this moment. Please have a look when you have time.

More details:
When rotating the scrolling area by 90 degrees clockwise, top and right we get from getBoundingClientRect() become left and top in the local coordinate system. So we need to scroll to x = container.top - target.top; y = container.right - target.right.

[idiotWu]

However, my suggestion is to use the horizontal scroll plugin (#359 (comment)) when you want to redirect scrollY to scrollX. Applying CSS transformations like this will create a local coordinate system and cause some unexpected consequences.

[sadeghbarati]

@nzmitch

I guess you want to use writing-mode with smooth-scrollbar?

https://codepen.io/sadeghbarati/pen/ExexMMZ

CodePen demo does not support RTL horizontal