CODEWITHSUNDEEP
visual-studio-code
Kali
Kali

Reputation: 613

Prevent Vscode live server to scroll up on save

Every time I write something on stlye.css and save (or wait to live server to refresh), it scrolls my page up...it's really annoying, anyone know how to prevent this behavior?

enter image description here

Upvotes: 6

Views: 4430

Answers (5)

James Prentice
James Prentice

Reputation: 262

None of this worked for me.

I got rid of live-server and opted for hot module replacement from Vite

npm create vite@latest .

select vanilla and your good to go

npm i
npm run dev

Upvotes: 0

Yogesh Umesh Vaity
Yogesh Umesh Vaity

Reputation: 48309

My issue was fixed by doing the following two step process:

  1. Enable the Full Reload in the Live Server extension settings. See if it fixes the problem.

  2. Replace the injected.html file in the live-server folder which is found in the global node_module folder.

    a. To know the global node_module path run the command: npm root -g

    b. Replace the injected.html in your global node_modules live-server folder with this file.

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

How does it work? The live-server currently first removes the stylesheet from the page (possibly losing the scroll position) then re-adds it. Our process, instead, keeps the old stylesheet in place, then 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.

Upvotes: 0

RaVan Agrawal
RaVan Agrawal

Reputation: 1

go to vs code setting 1) markdown> Scroll editor with preview --> "off it" 2) markdown> scroll preview with editor --> "off it"

Upvotes: -1

abdullah gharbain
abdullah gharbain

Reputation: 185

go to live server extension and Disable then enable it ( don't forget to reload window

Upvotes: 0

mikael1000
mikael1000

Reputation: 357

The trick to solve this is to do the following

In program Visual Code: File -> Preferences -> settings

In settings page drop down Extensions and click Live Server Config

Tick the box: Settings:Full Reload

It stops the change of scroll position that you ask for.

However if it scrolls from top of page (in Chrome at least) down to the scroll position you're on when saving/reloading it is because you use:

html {    
    scroll-behavior: smooth;
}

Just comment it out under development (if you have it/use it) and want to prevent that from happening.

Input from another user: Note: you have to stop the live server and start it again to see the changes (happened to me)

Upvotes: 9

Related Questions