Vscode-live-server: Live Server reload keeping the scroll position

Created on 5 Nov 2018  路  17Comments  路  Source: ritwickdey/vscode-live-server

How can I make Live Server reload my page, but keep the scroll position on Chrome. For example, if I'm working on the footer, and the page reloads, it scrolls right up and I have to scroll back down every time.

I'm using version 70.0.3538.77 of Chrome and version 1.28.2 of VS Code.

Thanks a lot!

Most helpful comment

It's happening with me also, you can check the code I'm working on in my repo here.

I also noticed that this only happens when I update the CSS file. If I save the HTML being served it doesn't scroll back.

OS: Ubuntu 18.04.1 LTS
Chrome version: Version 70.0.3538.110 (Official Build) (64-bit)
VS Code version: 1.29.1

All 17 comments

Can you produce something?

It's happening with me also, you can check the code I'm working on in my repo here.

I also noticed that this only happens when I update the CSS file. If I save the HTML being served it doesn't scroll back.

OS: Ubuntu 18.04.1 LTS
Chrome version: Version 70.0.3538.110 (Official Build) (64-bit)
VS Code version: 1.29.1

im facing the same issue too

Me either unfortunately, it's really annoying, I've tried set liveServer.settings.fullReload to true, but it didn't work too. Like gassiss wrote, the issue is happening with CSS files, HTML and JS are fine.
OS: Windows 8.1
VS Code version: 1.30.1
Chrome version: 71.0.3578.98

Happy New Year!

it's terrible =(

Windows 10
Chrome 71.0.3578.98
VS Code 1.30.2

Thanks a lot for this @fanfare! Thought there would be more complaints about this issue. Frustrating on every single refresh.

To apply to VS Code extension, navigate to:
~/.vscode/extensions/ritwickdey.liveserver-5.6.1/.vscode/extensions/ritwickdey.liveserver-5.6.1/node_modules/live-server/injected.html

@fanfare thanks, it works for me too.

Brackets preview is very good! Got a similar viewer for vscode?

Hey I got a solution! .... imagine in HTML you have a <link> which imports your style.css ,

  1. set the full Reload in VSCode for LiveServer to true/enable it (If i am not clear enough search it)
  2. under your CSS <link> open a <style> and make your rest of your style sheet implementation there, now it is not jumping up everytime , and then cut paste these changes to your real css file.

I'm also really annoyed buy this.

EDIT:
I just had to tick the box in settings that says Settings: Full Reload. Do not need to hack it more. In Visual Code.

I'm having the same problem and unticking the "Full reload" option doesn't work for me (on Mac Chrome).

I'm having the same problem and unticking the "Full reload" option doesn't work for me (on Mac Chrome).

I know this is kinda old but it might be useful for someone. Basically what I did is set body to min-height: 100% instead of height: 100%

2021 this problem still exists, why dont they fix it by default

2021 this problem still exists, why dont they fix it by default

This is probably a problem with your website. Try checking if you can get scroll position using javascript.

2021 this problem still exists, why dont they fix it by default

This is probably a problem with your website. Try checking if you can get scroll position using javascript.

I think my issue is with SASS live extention

2021 this problem still exists, why dont they fix it by default

This is probably a problem with your website. Try checking if you can get scroll position using javascript.

I think my issue is with SASS live extention

Why did you put a thumb down on my post? Didn't my solution work for you?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dominik-korsa picture dominik-korsa  路  6Comments

GaoHengdong picture GaoHengdong  路  4Comments

Stonerea656 picture Stonerea656  路  5Comments

Er-rchydy picture Er-rchydy  路  3Comments

ghost picture ghost  路  6Comments