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
In Ruby, I can go:
User.find_by(email: "foobar@email.com").update(email: "hello@email.com")
How can I do something similar in Elixir? ...
New
Hello everyone,
I try to use an Javascript Event Handler in my root.html.leex file.
Therefore I created a function in the app.js file: ...
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
Hey all,
I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set?
Thanks.
New
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
In templates/appointment/index.html.eex:
<%= for appointment <- @appointments do %>
<tr>
<td><%= appoi...
New
If I have a string “1000 cfu/ml” . I want to remove the characters and / and space . So the string is like this
"1000"
What is the ...
New
Hi!
In PHP: $SERVER['SERVERADDR'] - in Elixir?
Searched the docs for ip address and the web, no good results.
Thanks!
New
Other popular topics
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
After calling mix ecto.create I get this error:
17:00:32.162 [error] GenServer #PID<0.412.0> terminating
** (Postgrex.Error) FATAL...
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
I have VueJS GUIs with the project generated using Webpack.
I have Elixir modules that will need to be used by the VueJS GUIs.
I fore...
New
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? https://hexdocs.pm/ecto/Ecto.Repo.h...
New
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this:
...
New
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
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
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
Lets say i have map like this fetching from my database
%{"_id" => #BSON.ObjectId<58eb1a7a9ad169198c3dXXXX>, "email" => "XX...
New







