Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus/element-plus@22168

commit: f3007c4

🧪 Playground Preview: https://element-plus.run/?pr=22168
Please comment the example via this playground if needed.

Currently, when there are many tabs in the horizontal direction, users can only scroll through the tabs using a touchpad, as the mouse wheel cannot be used for scrolling since deltaX is always 0

#22024 includes support for mouse scrolling.

Note that you should hold down the shift key when scrolling horizontally, This is consistent with native scrolling.

Demo

If horizontal Tabs need to support vertical scrolling, I suggest implementing it inside the Tabs component to avoid breaking the behavior of the virtual-list.

But we can wait for the members’ opinions first.😃

Thank you for the reminder. On my computer, holding the Shift key doesn't enable horizontal scrolling of the tabs either (though swiping on the touchpad works).
I also compared it with several other component libraries, which support horizontal scrolling directly using the mouse wheel. That's why I created this PR. 😃

On my computer, holding the Shift key doesn't enable horizontal scrolling of the tabs either (though swiping on the touchpad works).

Me too, shift + scroll doesn't work.

I also compared it with several other component libraries, which support horizontal scrolling directly using the mouse wheel. That's why I created this PR. 😃

Honestly I'm little bit surprised other libraries like ant design handle this behavior. It feels unnatural to allow this type of scroll.

That said i don't really have an opinion on this.

@Dsaquel Hello, I have found a problem. 🤔

If we modify it directly like this: layout: computed(() => 'vertical'), it will affect the horizontal scroll behavior on the touchpad. When swiping left and right, horizontal scrolling will not work because the change is in deltaX, not deltaY.

So we might still need the following code to handle this issue.

I've thought of two ways to handle it.

1. Declare handleWheel in tab-nav.tsx, including the code above. This will not affect useWheel.
2. Add a property in useWheel, such as isTabs, with a default value of false. The handling logic from the above code will only be applied when it is set to true.

I'm not sure which approach is more suitable. Do you have any thoughts on this? 👀 👀

Nice catch, i need to hold and understand why we both cannot scroll using shift key.
Taking a step back, maybe there is a way to allow us scroll with shift key.

Nice catch, i need to hold and understand why we both cannot scroll using shift key. Taking a step back, maybe there is a way to allow us scroll with shift key.

This appears to be caused by differences between systems or browsers.

This file might help address the issue: https://github.com/facebookarchive/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js

P.S: The mousewheel directive also depends on it.

Thank you, but the issue is still not resolved after I used normalize-wheel-es. 🤔

Maybe some of the code in tab-nav.tsx is causing this issue, because I noticed that I can use shift + scroll to horizontally scroll in Table(table-with-fixed-column), but I haven't figured out a better solution yet. 😢

Maybe some of the code in tab-nav.tsx is causing this issue, because I noticed that I can use shift + scroll to horizontally scroll in Table(table-with-fixed-column), but I haven't figured out a better solution yet. 😢

Can we try using the v-mousewheel directive like we do with the Table component? Sorry, I don’t have a Windows device, so I’m unable to test this myself.

Thank you, but this seems unrelated to v-mousewheel, because even after I removed v-mousewheel from table.vue, I can still use shift + scroll to scroll horizontally. You can take a look at the comment below. 👀 👀

I found a piece of code in use-grid-wheel.ts, which should be handling the horizontal scrolling situation in Windows.

// Special case for windows machine with shift key + wheel scrolling
if (e.shiftKey && y !== 0) {
   x = y
   y = 0
}

So I added this logic to use-wheel.ts. Do you think this is appropriate? 🤔

Hello, @keeplearning66, your PR title does not meet the standards, please refer to here.
你好，@keeplearning66，你的 PR 标题不符合规范，请参考这里。

Unfortunately, with my linux system (Ubuntu 24) using shift + scroll to scroll horizontally doesn't work in local or playground.

Unfortunately, with my linux system (Ubuntu 24) using shift + scroll to scroll horizontally doesn't work in local or playground.

On Firefox running in an Ubuntu 24 virtual machine, native scrolling doesn’t work for me, but it works correctly inside the Tabs component. Is there any configuration I need to adjust?

On Firefox running in an Ubuntu 24 virtual machine, native scrolling doesn’t work for me, but it works correctly inside the Tabs component. Is there any configuration I need to adjust?

I'm in a different desktop but still using Ubuntu 24 and both works now... 😆.

@keeplearning66 Thanks for your contribution! ❤️