Sticky Scroll: Never Get Lost in Visual Studio Code Again!

Aug 18, 2022 | .NET

Finally came what many of us were not waiting for but wishing for! (like the song that nobody expected but everybody needed it). Who is not tired of having hundreds of lines of code and not knowing what class or interface you are in?

Scroll up, scroll down and keep getting lost in the code without being able to find the namespace or method you are looking for.

This new feature comes to avoid us developers the excessive wear of the mouse wheel (I’ve seen some with more wear than the tires of a Formula 1) and to save us a little anxiety.

image 13

Sticky Scroll is a helpful feature available in many code editors, including Visual Studio Code (VSCode). It allows developers to keep a portion of their code visible while scrolling through the rest of the file.

This article will explore what sticky scroll is, why it’s essential in VSCode, and how to enable and customize it. We will also discuss sticky scroll in Visual Studio 2022 and other Visual Studio versions.

What is Sticky Scroll in Visual Studio Code?

Sticky scroll is a feature that allows developers to “pin” a specific section of their code to the top of the editor while scrolling through the rest of the document. This feature makes it easy to compare different parts of the code or keep an essential section visible at all times.

Why Use Sticky Scroll in VSCode?

There are several reasons why using sticky scroll can enhance your coding experience in VSCode:

  • Code Navigation: Sticky scroll helps you navigate through large files with ease, as you can keep important parts of your code visible while browsing through the rest of the file.
  • Comparing Code Segments: Comparing different code segments becomes more manageable when you can keep one part visible while scrolling through the rest of the document.
  • Increased Productivity: By keeping critical sections of your code in view, you can maintain context and focus, ultimately increasing your productivity.
image 14
Thanks to Stefan Judis for this video

How to Enable Sticky Scroll in Visual Studio Code

To enable sticky scroll in VSCode, follow these simple steps:

  1. Open Visual Studio Code.
  2. Click on the gear icon in the lower left corner to open the settings menu.
  3. Select “Settings” from the dropdown menu.
  4. In the search bar, type “sticky scroll” to filter the results.
  5. Check the box next to “Editor: Sticky Scroll” to enable the feature.
image 15

Visual Studio 2022 Sticky Scroll

Visual Studio 2022 is the latest version of the popular development environment from Microsoft. While sticky scroll is not a built-in feature in Visual Studio 2022, there are extensions available that can add similar functionality to the IDE.

Sticky Scroll in Visual Studio

For users of other Visual Studio versions, sticky scroll is not available by default. However, you can still achieve a similar effect by using an extension:

  • Visual Studio Sticky Scroll Extension: A popular extension that adds sticky scroll functionality to Visual Studio is the “StickyScroll” extension. To install it, open the Extensions menu in Visual Studio, search for “StickyScroll,” and click “Download.”

Sticky Scroll in VS Code

As mentioned earlier, sticky scroll is a built-in feature in Visual Studio Code. Once enabled, you can easily navigate through your code while keeping essential sections pinned to the top of the editor.

image 16
Source: VS Code July 2022 Update

Customizing Sticky Scroll Behavior in VSCode

To customize the behavior of the sticky scroll

feature in VSCode, follow these steps:

  1. Open Visual Studio Code.
  2. Click on the gear icon in the lower left corner to open the settings menu.
  3. Select “Settings” from the dropdown menu.
  4. In the search bar, type “sticky scroll” to filter the results.
  5. Under “Editor: Sticky Scroll”, you can adjust the settings according to your preference.

Troubleshooting Sticky Scroll Issues

If you’re experiencing issues with sticky scroll in Visual Studio Code, try the following steps:

  1. Ensure that you have the latest version of VSCode installed. You can check for updates by going to the “Help” menu and selecting “Check for Updates.”
  2. Reset your settings to the default configuration by clicking on the gear icon, selecting “Settings,” and then clicking on the “Reset Settings” button.
  3. Disable any conflicting extensions that might be interfering with the sticky scroll feature.

Alternatives to Sticky Scroll

If you’re looking for alternatives to sticky scroll, consider these options:

  1. Split Editor: VSCode offers the ability to split the editor into multiple panes, allowing you to view different parts of your code side by side.
  2. Code Folding: Another useful feature in VSCode is code folding, which lets you collapse and expand sections of your code to make navigation easier.

Conclusion

Sticky scroll is a valuable feature in Visual Studio Code that can significantly enhance your coding experience. By keeping crucial sections of your code visible while scrolling through the rest of the document, you can maintain context, compare code segments, and increase productivity.

Although not built-in for Visual Studio 2022 and other versions, extensions can provide similar functionality. With the ability to customize and troubleshoot sticky scroll, you can optimize your coding workflow in VSCode.

According to Visual Studio Code:

“The “sticky scroll” UI will show which class/interface/namespace/function/method/constructor the top of the editor is in, helping you know the location within a document.”

And obviously this feature has generated a lot of hype among developers. The reception of this feature has been incredible, just look at the comments on the Sticky Scroll video

image 109

Some people even consider it the most useful feature since the syntax highlighting feature:

image 107

In my personal opinion I have to say that I would never have thought of a feature like this, but it is true that it is a “very simple” feature but at the same time very powerful.

I also have to say that I agree with Andrii Lukianenko’s opinion in the Linkedin post, it seems to me a very correct point of view:

image 108

I think he is right, if a function or method takes up more than one screen, it is most likely doing too many things. If we remember the SOLID principles in C# (mainly SRP), we can remember that in Single Responsibility Principle when something has more than one responsibility it means that we are not doing something in the best way.

I’m sure that the mouse scroll wheel of many developers will be very grateful for this feature. Finally it will be able to avoid its own wear and tear).

Frequently Asked Questions

  1. Is sticky scroll available in Visual Studio 2022 by default?
    • No, sticky scroll is not a built-in feature in Visual Studio 2022. However, you can achieve similar functionality by installing extensions like “StickyScroll.”
  2. Can I customize the sticky scroll behavior in VSCode?
    • Yes, you can customize the sticky scroll behavior by going to the settings menu, searching for “sticky scroll,” and adjusting the settings according to your preference.
  3. What alternatives are there to sticky scroll in VSCode?
    • Alternatives to sticky scroll in VSCode include using the split editor feature to view different parts of your code side by side and code folding to collapse and expand sections of your code.
  4. How do I troubleshoot sticky scroll issues in VSCode?
    • To troubleshoot sticky scroll issues, ensure you have the latest version of VSCode installed, reset your settings to the default configuration, and disable any conflicting extensions.
  5. Is sticky scroll available in other code editors?
    • Yes, sticky scroll or similar features are available in various code editors, including Sublime Text, Atom, and JetBrains IDEs. The implementation and customization options may vary depending on the editor.

You May Also Like

Sign up For Our Newsletter

Weekly .NET Capsules: Short reads for busy devs.

  • NLatest .NET tips and tricks
  • NQuick 5-minute reads
  • NPractical code snippets
.