Bumppoman
Phoenix LiveView Hooks: window scroll issues
I have a LiveView form where an error message is displayed along with the form if the form was invalid. Pretty standard stuff. I am trying to implement a hook on this element to scroll to the top of the page when it is mounted. The hook is being called, it just won’t scroll the page. Is this a limitation? I’ve tried both this.el.scrollIntoView as well as window.scrollTo(0, 0). Neither moves the page at all.
Marked As Solved
sfusato
If you open the browser’s dev console and manually run the command what happens?
Another idea: try calling it with a timeout and see if it makes a difference: setTimeout(() => { window.scrollTo(0,0) }, 1000)
Also Liked
Bumppoman
That was a good thought! The timeout works. Strangely, it also works using setTimeout if the time is 0. I wasn’t going to be happy with a delay but as long as I can set the timeout to 0, it’s just a curiosity why it won’t work directly.
I appreciate the help.
Bumppoman
I have a separate hooks script that imports all of the hooks and adds them.
The hook is definitely being called…if I change the content to alert("TESTING") the alert appears when I would expect it to. It just won’t scroll the window for whatever reason.
Last Post!
Bumppoman
That was a good thought! The timeout works. Strangely, it also works using setTimeout if the time is 0. I wasn’t going to be happy with a delay but as long as I can set the timeout to 0, it’s just a curiosity why it won’t work directly.
I appreciate the help.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Producing high quality Elixir screencasts since 2017.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"