Canvas: Improve scrollbar usability and interaction for cards

Feature requests
1

Feature candidate: Enhance the ability to grab and drag the scrollbar within Canvas cards.

The Problem: Currently, it is very difficult to interact with the scrollbar of a card inside a .canvas file. When a card has long content, trying to click and drag the scrollbar often fails to “stick” or results in accidentally moving the card itself or selecting text. The interaction feels inconsistent compared to the main Obsidian sidebar or standard notes.

Proposed Solution:

  • Wider hit area: Increase the invisible “hit area” for the scrollbar within Canvas cards to make it easier to grab.

  • Consistent behavior: Ensure that once a user starts dragging the scrollbar, the focus remains on scrolling until the mouse is released, preventing the card from being moved by mistake.

  • Visual feedback: Provide a clearer hover state for the scrollbar to indicate it is ready to be interacted with.

Current Workaround: Using the mouse wheel or trackpad gestures, but this is not always ideal for very long notes where a scrollbar drag is much faster for navigation.

SYSTEM INFO:
Obsidian version: v1.11.5
Installer version: v1.10.6
Operating system: Windows 11 Home 10.0.26200
Login status: logged in
Language: en
Catalyst license: none
Insider build toggle: off
Live preview: on
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: off
Plugins installed: 9
Plugins enabled: 7
1: Continuous Mode v3.5.1
2: Custom Frames v2.5.0
3: Importer v1.8.3
4: Kanban v2.0.51
5: Calendar v1.5.10
6: Tag Wrangler v0.6.4
7: Advanced Canvas v5.6.5

2

It’s not perfect and there’s some room for improvement, but you could use some CSS to widen the scrollbar width a bit for the time being. This works in reading mode or fully clicked into the card and in editing mode. ※These snippets work on Windows; not tested on macOS yet.

Obsidian_UfrL3WmYKC

.canvas-node-content.markdown-embed > .markdown-embed-content ::-webkit-scrollbar {
    width: 20px;
}

.markdown-source-view.mod-inside-iframe > .cm-editor ::-webkit-scrollbar {
    width: 20px;
}

How to CSS snippets if needed.