When reloading a page live-reload is reseting a current position of browser scrollbar

[Migacz85]

Issue description

Like in topic description: When reloading a page live-reload is reseting a current position of browser scrollbar. Let say we are working on footer of html page, when saving a file page is reloaded as expected but the page is scrolled up to very bottom of the page. To see the effects you need to manually scroll down back to the footer to see effect.

Is any way to live position of the browser scrollbar at the last position it was ?

Software details

live-reload -v 1.2.0

• Command line used for launching live-server: live-server
• OS: manjaro
• Browser (if browser related): chromium
• Node.js version: 6.3.0
• live-server version: 1.2.0

[ghost]

I was dealing with this also, the issue seems to be with watching the CSS files.. Even setting the delay does nothing if Live server is watching or monitoring a css file. It then reloads the page as if it has never seen that CSS file before instead of as if it where cached ( When cached, the page can reload and stay in the current location, but if new, the page must start from the top as it renders the page )

One solution to this is if you are using scss or some other pre-processor, then have the live server watch only those files or ignore the css files, then set a delay time aka ( Wait ) to something like 1000ms, now it will act as if the css file was cached on your local system because it loads the page new without recognizing that the css file is fresh and assumes it is a cached file.

Hope this helps.

[fanfare]

Was having the same issue, here's a fix in the mean time -- replace injected.html in your global node_modules live-server folder with this: https://gist.github.com/fanfare/edca5a90fa0d5b31eb0980293d9664af

you may need to npm cache clear --force and npm cache verify so it recognizes the update.

live-server currently first removes the stylesheet from the page (possibly losing the scroll position) then re-adds it. this, instead, keeps the old stylesheet in place, then adds adds the updated version (so there are momentarily 2 versions of the same css file) then kills the old version -- so the scroll position never loses focus.

[yannxaver]

The bugfix from @fanfare didn't work for me unfortunately (I ran cache clear and cache verify).

What worked for me: Add a very long div at the end of your page, which is styled in-line. <div style="height: 9999px;"></div>

That keeps the scroll position for me when hot-reloading.

[fanfare]

@jmagoga if you installed live-server globally via npm install -g live-server , type npm root -g in the terminal to get the global folder name, open that folder, then look in the node_modules folder to find the live-server folder. I'm on windows and In my case the path was C:\Program Files\nodejs\node_modules\live-server There you will find injected.html

[fanfare]

@jmagoga if you are on windows, my advice would be to download Agent Ransack https://www.mythicsoft.com/agentransack/download/ and search for injected.html on C:\ your system. Sorry if that is kind of overkill, I just don't know where it is installed for your comp -- that will help you find it though.

[arensonzz]

Using --no-css-inject command line option when running live-server solves this issue for me. It reloads page instead of injecting CSS and my browser (Firefox) keeps scroll position the same during reloads.

[capncrockett]

@fanfare That totally worked. I installed via VScode extensions and was having a hard time finding the file path. In case anyone else is having a hard time finding it: ~/.vscode/extensions/ritwickdey.liveserver-5.6.1/node_modules/live-server

[4rturkania]

@fanfare worked for me even without npm cache clear --force and npm cache verify. Thank you :) @yannxaver also worked for me! Great idea :) thank you for the alternative.

[Guipegoraro]

The bugfix from @fanfare didn't work for me unfortunately (I ran cache clear and cache verify).

What worked for me: Add a very long div at the end of your page, which is styled in-line. <div style="height: 9999px;"></div>

That keeps the scroll position for me when hot-reloading.

worked perfectly, thank you very much!

[4rturkania]

@Guipegoraro since my last comment I found an easier solution to the problem (I don't know why I haven't found it sooner). Check extension settings and make sure you have 'Full Reload' set as true. I was later looking for another solution because the previous one stopped working after about 2 weeks (maybe after an update).

[SonuKr95]

[YogeshUmeshVaity]

Was having the same issue, here's a fix in the mean time -- replace injected.html in your global node_modules live-server folder with this: https://gist.github.com/fanfare/edca5a90fa0d5b31eb0980293d9664af

you may need to npm cache clear --force and npm cache verify so it recognizes the update.

live-server currently first removes the stylesheet from the page (possibly losing the scroll position) then re-adds it. this, instead, keeps the old stylesheet in place, then adds adds the updated version (so there are momentarily 2 versions of the same css file) then kills the old version -- so the scroll position never loses focus.

This worked for me. Remember to also enable Full Reload in extension settings of Live Server.