ShawnMcCool
Problem with LiveView Anchors + History
The following testing live view has anchor tags. When clicked, the anchors work fine and navigate the browser to the correct location. When I press the browser “back” button, the anchor changes in the history and the browser does not change scroll positions.
Is there a way to recover this forward/backward navigation behavior?
LiveView: 0.20.2
defmodule LiveAnchorTestWeb.AnchorLive do
use LiveAnchorTestWeb, :live_view
def mount(_params, _session, socket) do
{:ok, socket}
end
def render(assigns) do
~H"""
<h1><a id="heading">heading</a></h1>
<br />
<a href="#footing">go to footing</a>
hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br />
hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br />
hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br />
hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br />
hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br />
hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br />
hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br /> hi<br />
hi<br /> hi<br /> hi<br /> hi<br />
<h2><a id="footing">footing</a></h2>
<br />
<a href="#heading">go to heading</a>
"""
end
end
Most Liked
felix-starman
Something like the JavaScript below combined with a handle_params that uses a push event could probably get you what you want
// Scroll to target selector from event
window.addEventListener("phx:scroll-into-view", e => {
let target;
if (e.target) { target = e.target };
if (e.detail.id) { target = document.getElementById(e.detail.id) };
if (target == window) { return };
let behavior = e.detail.behavior || "auto";
let block = e.detail.block || "start";
let inline = e.detail.inline || "nearest";
target.scrollIntoView({ behavior, block, inline });
});
1
Popular in Questions
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New
What is the proper way to load a module from a file in to IEX?
In the python world, doing something like this pretty standard:
from ....
New
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
Hi everyone!
I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
Hello!
Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: )
Hello all, this is ...
New
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
Other popular topics
Hi folks,
Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
New
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum.
...
New
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
Phoenix 1.4.0 released
Phoenix 1.4 is out! This release ships with exciting new features, most notably
with HTTP2 support, improved deve...
New
i’m a new one to elixir
which editor can i use
vs code? or atom?
Thanks! :smiley:
New
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1]
15:22:35.803 [error] gen_event {lager_file_backend...
New
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
- #forms
- #api
- #metaprogramming
- #security
- #hex









