[Component] [table-v2] table-v2 component would be useful if only two scrolling issues were resolved.

[racktime]

Bug Type: Component

Environment

• Vue Version: 3.2.41
• Element Plus Version: 2.4.4
• Browser / OS: Chrome 120.0.6099.130
• Build Tool: Vite

Reproduction

Related Component

• el-table-v2

Reproduction Link

Element Plus Playground

Steps to reproduce

1. Scrolling issues in mobile mode browsers Testing with mobile view in browser debugger mode

2. Scrolling issues in browsers with resolutions reduced to 100% or less Test in browser resolution reduced to 100% or less

What is Expected?

Normal scrolling

What is actually happening?

1. No scrolling in mobile mode browser
2. No scrolling in browser resolutions below 100%

Additional comments

This component would be useful if only 2 scrolling issues were fixed.

1. No scrolling in mobile mode browser
2. No scrolling in browser resolutions below 100%

[btea]

You mean scrolling on mobile will be a problem?

[racktime]

You mean scrolling on mobile will be a problem?

The problem is that scrolling does not work on mobile web browsers.

[racktime]

No one has an answer. Is this a problem that can't be improved?

[racktime]

Why is the table-v2 issue unanswered? Are they not interested at all?

[btea]

Sorry, there are too many messages and some may have been missed.

element-plus was originally positioned as a PC component, and for mobile devices, it is recommended to use the corresponding mobile component library.

As for the problem you mentioned, it seems difficult to be compatible with mobile devices. At least, I don't have any good solution for now, or do you have any good suggestions?

[racktime]

This is a problem that occurs in the mobile browser, not the native app. And it also occurs when you adjust the resolution on the PC. This is not a problem limited to mobile, but rather a problem that occurs across the board.

First of all, it seems like there is a problem with the scroll area event handler.

I wonder if we could add the following event handling.

function getConvertedEventType(type) { if (isMobile()) { if (type === 'mousedown') { type = 'touchstart'; } else if (type === 'click') { type = 'touchend'; } }

return type; }

['touchstart', 'touchmove', 'touchend', 'mousedown', 'mousemove', 'mouseup', 'click'].forEach( (eventType) => { document.addEventListener(eventType, () => { printEl.appendChild(createParagraph(eventType));

  window.scrollTo(0, document.body.scrollHeight);
});

} );