question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Scroll-to-cursor is broken inside scrollable containers

See original GitHub issue

Do you want to request a feature or report a bug?

bug

What’s the current behavior?

Set the editor to a fixed height and overflow-y: auto (standard procedure for scrolling content). Press enter several times to exceed this height and the and cursor disappears; a scrollbar appears but the editor does not scroll down. However, if you type a few characters (instead of just creating new lines with 0-1 characters each), the editor suddenly snaps down as expected.

Demo (direct from example page): slate scroll gif

Slate JSFiddle with same issue: https://jsfiddle.net/f4150bbq/

This is not reproduceable in a simple JSFiddle with a contenteditable div: https://jsfiddle.net/gz2wrkxz/1/

What’s the expected behavior?

When content exceeds available height, scroll editor down to cursor (i.e., the behavior that happens when you type several characters in the demo above).

I’ve tried my best to figure out the cause of this, but I’m coming up short- could there be a problem with scrollToSelection? Seeing the expected behavior when typing several characters is also interesting; are we accidentally overriding some default browser behavior?

Mac OS 10.12.3, Chrome 60.0.3112.101, Slate current

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:18 (9 by maintainers)

github_iconTop GitHub Comments

2reactions
ianstormtaylorcommented, Feb 26, 2019

Either way, this is still something that would be nice to fix in core. Since the current behavior seems obviously wrong. If someone wants to make a PR I’d be happy to have this fixed. Thanks!

2reactions
dmitrizzlecommented, Aug 7, 2018

I’d like to add my 2¢ by saying that scrolling logic should probably be a separate plugin.

Not sure if this is possible to implement with the way Slate operates now, however, scrolling behaviour is not universal for all types of applications. For example, focusing on void blocks (i.e. an image) may make sense in some cases to have the view scroll to the top edge of the block, and in others, to the bottom edge; and in some cases no scrolling is desired at all. Another case is a textfield with a limited input that requires no scrolling, which could make Slate component a lot lighter if it isn’t requiring additional logic. Finally, there may be apps that prefer smooth scrolling or other clever methods.

Read more comments on GitHub >

github_iconTop Results From Across the Web

overscroll-behavior - CSS: Cascading Style Sheets | MDN
If you have overscroll-behavior: contain; selected, the outer container will not scroll unless you move your cursor out of the inner container ...
Read more >
Scrollable Container inside a Column - flutter - Stack Overflow
I managed to implement a working layout using a Stack , the only down-side being that if I have a TextField and I...
Read more >
Drag to scroll - HTML DOM
User often uses the mouse to scroll in a scrollable container. In addition to that, some applications also allow user to scroll by...
Read more >
Power Apps SetFocus and Scroll to top of a Form - YouTube
Do you want to put the user's cursor into a specific text input? SetFocus is the answer. And now you know that did...
Read more >
Add a scrolling screen to a canvas app - Power Apps
Use containers within Vertical container · Ensure you're using a blank screen, and not a scrollable screen. · Select Insert > Layout, and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found