Skip to content

window.scrollTo behavior option missing "instant" string literal union #1195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
aquaductape opened this issue Oct 27, 2021 · 14 comments
Closed

window.scrollTo behavior option missing "instant" string literal union #1195

aquaductape opened this issue Oct 27, 2021 · 14 comments

Comments

@aquaductape
Copy link

Bug Report

window.scrollTo behavior option has three types: "smooth", "instant" and "auto", but typescript doesn't have "instant" value.

πŸ•— Version

v4.4.4

⏯ Playground Link

https://www.typescriptlang.org/play?#code/O4SwdgJg9sB0DOBjATlANmgKlAFAbwCMBTACwEMA3EKZALgAIByceAFzLFcYF8BKIA

πŸ’» Code

window.scrollTo({behavior: 'instant'})
@DanielRosenwasser DanielRosenwasser transferred this issue from microsoft/TypeScript Nov 4, 2021
@nickgirardo
Copy link

Hey, I just ran into this issue as well. It looks like according to the CSSOM spec there is no 'instant' setting for option.

You can see in the CSS Overflow Module Level 3 that scroll-behavior only accepts the vales 'auto' | 'instant'. Furthermore, the CSSOM specifies that if behavior is auto and the element in question being scrolled to has the smooth computed for it (i.e. the scroll-behavior property of the element is set to 'smooth') that smooth scrolling will be used. The only case where instant scrolling should be used (per the spec) is if the element doesn't have scroll-behavior set to smooth and auto is the behavior for scrollTo. In other words, instant scrolling behavior cannot be forced by the scrollTo method per the spec.

However, I've checked and both Firefox and Chrome deviate from the spec and allow the use of 'instant' for scrollTo. I'm not sure what should be done here from TypeScript's perspective as the reality of the web and the letter of its law differ. Ideally, the spec would be revised to allow for explicitly instant scrolling

@y-yagi
Copy link

y-yagi commented Dec 12, 2021

It seems this is intended. The instant has been renamed into auto. So you need to change instant into auto. Ref: fe01c9a#r31507840

@aquaductape
Copy link
Author

aquaductape commented Dec 12, 2021 •
edited
Loading

For my case I have to use instant option not auto because the <html> tag is set to smooth scroll, by using inline style

@tamaina tamaina mentioned this issue Feb 3, 2022
Merged
@BayanBennett BayanBennett mentioned this issue Apr 27, 2022
Closed
@calebn calebn mentioned this issue Jul 28, 2022
Merged
@maranomynet
Copy link

maranomynet commented Aug 16, 2022 •
edited
Loading

I'm running into basically the same issue as @aquaductape:
behavior: 'auto' respects the element's CSS scroll-behavior: smooth declaration.

What works (in browsers) is behavior: 'instant', prefixed with a // @ts-expect-error [mildly irritated message] πŸ˜‰

@wyattzheng
Copy link

wyattzheng commented Sep 1, 2022 •
edited
Loading

according to https://drafts.csswg.org/cssom-view/#extensions-to-the-window-interface,
'instant' has been removed, browser should not support this feature.

i opened an issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1358809

@maranomynet
Copy link

maranomynet commented Sep 1, 2022 •
edited
Loading

The proposed merging of "instant" with "auto" along with the described resolution algoritm of the "auto" behavior value, remove a perfectly valid use case/feature, without as much as a hint of justification or even mentioning it.

After the change window.scrollTo (and related methods) can only affect scroll behavior in the direction of making it smoother, but not make it more instant. Something that was previously possible, and intentionally done (as demonstrated by this issue, and other similar examples available with quick Googling).

This spec change looks like a mistake, IMO β€” a resonable hypothesis as the linked document is in an "editor's draft" state:

An editor's draft is a document allowing the Group to iterate internally on its content for consideration. Editor's Drafts are works in progress inside a W3C Group and are not required to have the consensus of the Group participants. These drafts have not received formal review and are not endorsed W3C.

These drafts MUST NOT be cited as W3C standards and may or may not become W3C standards.

β€” https://www.w3.org/standards/types#ED (Emphasis mine)

Thus, I argue that this change in TypeScript's lib is premature, and someone should raise an issue with W3C's CSSWG regarding this, instead of pressuring browser makers to act on it in haste.

@wyattzheng
Copy link

@maranomynet yes, that makes sense!

@saschanaz
Copy link
Contributor

Thanks people! Filed w3c/csswg-drafts#7773.

@gomesalexandre gomesalexandre mentioned this issue Apr 14, 2023
Merged
5 tasks
@YspMark YspMark mentioned this issue Apr 18, 2023
Merged
@Teamop
Copy link

Teamop commented Apr 19, 2023

should closed by #1481

@saschanaz
Copy link
Contributor

Right, thanks.

@github-actions close

@github-actions
Copy link
Contributor

Closing because @saschanaz is one of the code-owners of this repository.

@pranav2844
Copy link

When I run npm run build, it says that "instant" isn't a valid value for type ScrollBehavior.

My code is

document.documentElement.scrollTo({
top: 0,
left: 0,
scroll-behavior: 'instant'
})

and

window.scrollTo({
top: ref.offsetTop,
left: 0,
scroll-behavior: 'instant'
})

@githyuvi githyuvi mentioned this issue Mar 8, 2024
Merged
@MahmoudAliExpatrio
Copy link

If it's still an issue, in my case I was using window.scroll method and gave the behavior prop:

  useEffect(() => {
    window.scroll({
      top: 0,
      behavior: 'instant' as ScrollToOptions['behavior'],
    })
  }, [step])

@saschanaz
Copy link
Contributor

If this is still an issue, please consider updating TypeScript.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@maranomynet @y-yagi @saschanaz @nickgirardo @Teamop @wyattzheng @aquaductape @pranav2844 @MahmoudAliExpatrio