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.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
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
- #javascript
- #podcasts
- #code-sync
- #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
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
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.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
Courses that'll move you from confusion to "Aha, now I get it!"