Proposal: Exposing native scroll as API

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

Proposal: Exposing native scroll as API

Adam Eisenreich
Hello everyone. I think browsers should expose the native scroll as API. 

Possible uses:
* Native-like scroll in canvas apps (games) - Google's Proxx (https://proxx.app/) had to do quite a bit of magic to have native scroll for a game.
* Camera controls for touch device (3D model preview)
Gesture recognition (maybe)
* Infinite scroll (they could get rid of the invisible long div, that makes the scrolling inside possible) - Angular virtual scroll implementation https://material.angular.io/cdk/scrolling/overview
_______________________________________________
es-discuss mailing list
[hidden email]
https://mail.mozilla.org/listinfo/es-discuss
Reply | Threaded
Open this post in threaded view
|

Re: Proposal: Exposing native scroll as API

guest271314
What is meant by "native scroll"?

```
window.scrollTo({
  left: leftValue, // e.g., element.getBoundingClientRect().left
  top: topValue, //  element.getBoundingClientRect().top
  behavior: "smooth"
});
```

?

On Fri, Jun 21, 2019 at 2:07 PM Adam Eisenreich <[hidden email]> wrote:
Hello everyone. I think browsers should expose the native scroll as API. 

Possible uses:
* Native-like scroll in canvas apps (games) - Google's Proxx (https://proxx.app/) had to do quite a bit of magic to have native scroll for a game.
* Camera controls for touch device (3D model preview)
Gesture recognition (maybe)
* Infinite scroll (they could get rid of the invisible long div, that makes the scrolling inside possible) - Angular virtual scroll implementation https://material.angular.io/cdk/scrolling/overview
_______________________________________________
es-discuss mailing list
[hidden email]
https://mail.mozilla.org/listinfo/es-discuss

_______________________________________________
es-discuss mailing list
[hidden email]
https://mail.mozilla.org/listinfo/es-discuss
Reply | Threaded
Open this post in threaded view
|

Re: Re: Proposal: Exposing native scroll as API

Adam Eisenreich
In reply to this post by Adam Eisenreich
I mean, that there should be an API that would say, how an element would scroll, if it was in place of for example a `<canvas>`.


```
const scrollArea = new ScrollArea(canvasElement, {
  borderBox: 'unlimited', // Default would be the element
  //viewPort: '100#200'
});

scrollArea.addEventLisener('scrollStart', event => {
  console.log(event.endOffsetPosition);
  console.log(event.currenOffset);
  console.log(event.deltaX);
  // Possibly others
});
scrollArea.addEventLisener('scroll', () => {});
scrollArea.addEventLisener('scrollEnd', () => {});
```
Or,
```
function step(timestamp) {
  canvas.translate(scrollArea.currentOffset.top, scrollArea.currentOffset.left);
  requestAnimationFrame(step);
}

requestAnimationFrame(step);
```
_______________________________________________
es-discuss mailing list
[hidden email]
https://mail.mozilla.org/listinfo/es-discuss
Reply | Threaded
Open this post in threaded view
|

Re: Re: Proposal: Exposing native scroll as API

guest271314
Not following what 

> if it was in place of

is intended to mean?

It is currently possibble to scroll to any portion of the viewport and get the current position of any element during `scroll` event. 

What is being proposed that is not already possible?

On Fri, Jun 21, 2019 at 2:30 PM Adam Eisenreich <[hidden email]> wrote:
I mean, that there should be an API that would say, how an element would scroll, if it was in place of for example a `<canvas>`.


```
const scrollArea = new ScrollArea(canvasElement, {
  borderBox: 'unlimited', // Default would be the element
  //viewPort: '100#200'
});

scrollArea.addEventLisener('scrollStart', event => {
  console.log(event.endOffsetPosition);
  console.log(event.currenOffset);
  console.log(event.deltaX);
  // Possibly others
});
scrollArea.addEventLisener('scroll', () => {});
scrollArea.addEventLisener('scrollEnd', () => {});
```
Or,
```
function step(timestamp) {
  canvas.translate(scrollArea.currentOffset.top, scrollArea.currentOffset.left);
  requestAnimationFrame(step);
}

requestAnimationFrame(step);
```
_______________________________________________
es-discuss mailing list
[hidden email]
https://mail.mozilla.org/listinfo/es-discuss

_______________________________________________
es-discuss mailing list
[hidden email]
https://mail.mozilla.org/listinfo/es-discuss
Reply | Threaded
Open this post in threaded view
|

Re: Proposal: Exposing native scroll as API

Adam Eisenreich
In reply to this post by Adam Eisenreich
If you want to have native scrolling experience for `<canvas>` you need to either implement your own scrolling behaviour, or you will create `<canvas>` of size much bigger than screen, that way it overflows screen and shows scollbars, but then you must only render on part of canvas as most is hidden.

I would like an API I would ask:
If this element **would be scrollable**, when scrolling would actually occur? How long would the animation take on this platform? Where the end offset would be?
Scrolling isn't same for each platform ex.: PC, Mac, iOS, Android.

There is video about proxx, it mentions other problems too, but they explain there how they did implement natural scrolling for `<canvas>`: https://youtu.be/ViyTYEv9dM8?t=1005
_______________________________________________
es-discuss mailing list
[hidden email]
https://mail.mozilla.org/listinfo/es-discuss
Reply | Threaded
Open this post in threaded view
|

Re: Proposal: Exposing native scroll as API

Claude Pache
In reply to this post by Adam Eisenreich


Le 21 juin 2019 à 16:07, Adam Eisenreich <[hidden email]> a écrit :

Hello everyone. I think browsers should expose the native scroll as API. 

Possible uses:
* Native-like scroll in canvas apps (games) - Google's Proxx (https://proxx.app/) had to do quite a bit of magic to have native scroll for a game.
* Camera controls for touch device (3D model preview)
Gesture recognition (maybe)
* Infinite scroll (they could get rid of the invisible long div, that makes the scrolling inside possible) - Angular virtual scroll implementation https://material.angular.io/cdk/scrolling/overview

Scrolling is not part of ECMASCript (the core language), but is provided by a Web API. This is out of the scope of this mailing list.

—Claude


_______________________________________________
es-discuss mailing list
[hidden email]
https://mail.mozilla.org/listinfo/es-discuss
Reply | Threaded
Open this post in threaded view
|

Re: Proposal: Exposing native scroll as API

guest271314
In reply to this post by Adam Eisenreich
What are you NOT able to output right now relevant to programmatically scrolling using existing DOM methods, Web Animations API, and/or CSS? Have you filed an issue at browsers, WHATWG HTML, and WHATWG DOM?

On Fri, Jun 21, 2019 at 3:33 PM Adam Eisenreich <[hidden email]> wrote:
If you want to have native scrolling experience for `<canvas>` you need to either implement your own scrolling behaviour, or you will create `<canvas>` of size much bigger than screen, that way it overflows screen and shows scollbars, but then you must only render on part of canvas as most is hidden.

I would like an API I would ask:
If this element **would be scrollable**, when scrolling would actually occur? How long would the animation take on this platform? Where the end offset would be?
Scrolling isn't same for each platform ex.: PC, Mac, iOS, Android.

There is video about proxx, it mentions other problems too, but they explain there how they did implement natural scrolling for `<canvas>`: https://youtu.be/ViyTYEv9dM8?t=1005
_______________________________________________
es-discuss mailing list
[hidden email]
https://mail.mozilla.org/listinfo/es-discuss

_______________________________________________
es-discuss mailing list
[hidden email]
https://mail.mozilla.org/listinfo/es-discuss
Reply | Threaded
Open this post in threaded view
|

Re: Proposal: Exposing native scroll as API

kai zhu
In reply to this post by Adam Eisenreich
the referenced video was entertaining to watch (and i learned new things about typescript and proxies), but i still don't understand your UX-problem -- at least enough to know what/how a new standard-api would help.

there's a bunch of canvas-scrolling examples @ https://konvajs.org/docs/sandbox/Canvas_Scrolling.html.  examples #1 and #4 implement native canvas-scrolling, with the latter having less jankiness on my mobile-chrome.  maybe you're asking for consistent #4 css-behavior across all mobile-browsers (i have no idea if it works as well in ios-safari)?  that would be w3c csswg's domain.

also somewhat-related -- chrome is debating an intent-to-implement feature for scrollTo-behavior for text-fragments.
for example:
`<a href="https://www.example.com#targetText=You%20may%20use%20this%20domain`">https://www.example.com#targetText=You%20may%20use%20this%20domain`
will scroll to element in www.example.com containing text "You may use this domain". [1]

[1] Scroll-To-Text using a URL fragment


On Fri, Jun 21, 2019 at 10:33 AM Adam Eisenreich <[hidden email]> wrote:
If you want to have native scrolling experience for `<canvas>` you need to either implement your own scrolling behaviour, or you will create `<canvas>` of size much bigger than screen, that way it overflows screen and shows scollbars, but then you must only render on part of canvas as most is hidden.

I would like an API I would ask:
If this element **would be scrollable**, when scrolling would actually occur? How long would the animation take on this platform? Where the end offset would be?
Scrolling isn't same for each platform ex.: PC, Mac, iOS, Android.

There is video about proxx, it mentions other problems too, but they explain there how they did implement natural scrolling for `<canvas>`: https://youtu.be/ViyTYEv9dM8?t=1005
_______________________________________________
es-discuss mailing list
[hidden email]
https://mail.mozilla.org/listinfo/es-discuss

_______________________________________________
es-discuss mailing list
[hidden email]
https://mail.mozilla.org/listinfo/es-discuss
Reply | Threaded
Open this post in threaded view
|

Re: Proposal: Exposing native scroll as API

Andy Earnshaw-2
As Claude pointed out, Scrolling is not part of ECMAScript. On the subject of improved support for virtual scrolling, I've started discussions on CSS-WG and Web Components issue trackers. 


Please feel free to add your +1 there or contribute your own use cases to the discussion.

On Sat, 22 Jun 2019 at 19:41, kai zhu <[hidden email]> wrote:
the referenced video was entertaining to watch (and i learned new things about typescript and proxies), but i still don't understand your UX-problem -- at least enough to know what/how a new standard-api would help.

there's a bunch of canvas-scrolling examples @ https://konvajs.org/docs/sandbox/Canvas_Scrolling.html.  examples #1 and #4 implement native canvas-scrolling, with the latter having less jankiness on my mobile-chrome.  maybe you're asking for consistent #4 css-behavior across all mobile-browsers (i have no idea if it works as well in ios-safari)?  that would be w3c csswg's domain.

also somewhat-related -- chrome is debating an intent-to-implement feature for scrollTo-behavior for text-fragments.
for example:
will scroll to element in www.example.com containing text "You may use this domain". [1]

[1] Scroll-To-Text using a URL fragment


On Fri, Jun 21, 2019 at 10:33 AM Adam Eisenreich <[hidden email]> wrote:
If you want to have native scrolling experience for `<canvas>` you need to either implement your own scrolling behaviour, or you will create `<canvas>` of size much bigger than screen, that way it overflows screen and shows scollbars, but then you must only render on part of canvas as most is hidden.

I would like an API I would ask:
If this element **would be scrollable**, when scrolling would actually occur? How long would the animation take on this platform? Where the end offset would be?
Scrolling isn't same for each platform ex.: PC, Mac, iOS, Android.

There is video about proxx, it mentions other problems too, but they explain there how they did implement natural scrolling for `<canvas>`: https://youtu.be/ViyTYEv9dM8?t=1005
_______________________________________________
es-discuss mailing list
[hidden email]
https://mail.mozilla.org/listinfo/es-discuss
_______________________________________________
es-discuss mailing list
[hidden email]
https://mail.mozilla.org/listinfo/es-discuss

_______________________________________________
es-discuss mailing list
[hidden email]
https://mail.mozilla.org/listinfo/es-discuss