新手开发者求助：实现类VS高亮项标记的自定义滚动条

Hey there! I totally get what you're going for—building a VS Code-style scrollbar with ticks for highlighted items is a great touch for long lists, especially when you need to jump between related entries quickly. Let's break this down step by step, starting with fixing your existing code and then adding that custom scrollbar functionality.

1. Fix & Optimize Your Highlight Logic #

First, let's address the syntax issues and reliability problems in your current JavaScript code. Relying on the second class name of an element is fragile (class order can change accidentally), so we'll use data attributes instead for more stable targeting.

Your Original Code (with Issues) #

$('.highlight').click(function () { 
    // Get the second class name of the parent li 
    var highlightClass = $(this).parent().parent().attr('class').split(' ')[ 
    var highlightItem = '.' + highlightClass + ' > .menuDiv' 
    $(highlightItem).toggleClass('highlight-show') 
})

• Missing index after split(' ') (should be [1] but still unreliable)
• Chained parent().parent() is brittle—use closest() instead
• No error handling if the class structure changes

Optimized Highlight Code #

First, update your HTML to add a data-highlight-id attribute to each list item (this groups related items):

<li class="your-li-class" data-highlight-id="item-group-1">
    <div class="menuDiv">...</div>
    <button class="highlight">Highlight</button>
</li>

Then replace your JavaScript with this:

$('.highlight').click(function () {
    // Find the closest parent list item and get its highlight ID
    const highlightId = $(this).closest('li').data('highlight-id');
    
    // Target ALL elements in the same ID group
    const targetElements = $(`[data-highlight-id="${highlightId}"] > .menuDiv`);
    
    // Toggle the highlight class
    targetElements.toggleClass('highlight-show');
    
    // Update the scrollbar ticks whenever highlights change
    updateScrollbarTicks();
});

This is more reliable because it doesn't depend on class order, and closest() safely finds the parent <li> regardless of nested structure.

2. Build the Custom Scrollbar with Ticks #

Next, we'll add a fixed scrollbar track to the right of the page, then generate "ticks" that correspond to the position of highlighted elements.

HTML for Custom Scrollbar #

Add this to the bottom of your <body> tag:

<div class="custom-scrollbar">
    <div class="scrollbar-track"></div>
</div>

CSS for Scrollbar & Ticks #

Style the scrollbar to mimic VS Code's clean look:

/* Custom scrollbar container */
.custom-scrollbar {
    position: fixed;
    top: 0;
    right: 0;
    width: 8px;
    height: 100vh;
    background-color: #f5f5f5;
    z-index: 1000; /* Ensure it stays above other content */
}

/* Track for the ticks */
.scrollbar-track {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Highlight tick style */
.scrollbar-tick {
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: #007acc; /* VS Code's signature blue */
    border-radius: 2px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.scrollbar-tick:hover {
    opacity: 0.8;
}

/* Optional: Style native scrollbar to match */
body {
    scrollbar-width: thin;
    scrollbar-color: #ccc #f5f5f5;
}

JavaScript to Generate & Update Ticks #

This function calculates the position of each highlighted element and places ticks on the scrollbar. It also adds click functionality to jump directly to the highlighted item.

function updateScrollbarTicks() {
    const scrollTrack = $('.scrollbar-track');
    // Clear existing ticks first
    scrollTrack.empty();
    
    const highlightedItems = $('.highlight-show');
    if (highlightedItems.length === 0) return;
    
    // Calculate key dimensions
    const documentHeight = $(document).height();
    const viewportHeight = $(window).height();
    const scrollableHeight = documentHeight - viewportHeight;
    
    highlightedItems.each(function() {
        const item = $(this);
        // Get the item's distance from the top of the document
        const itemTop = item.offset().top;
        
        // Convert item position to a percentage of the scrollable area
        const tickPosition = (itemTop / scrollableHeight) * 100;
        
        // Create and append the tick
        const tick = $('<div class="scrollbar-tick"></div>');
        tick.css('top', `${tickPosition}%`);
        
        // Add click to scroll to the item
        tick.click(function() {
            $('html, body').animate({
                scrollTop: itemTop - 20 // Offset slightly for better visibility
            }, 300);
        });
        
        scrollTrack.append(tick);
    });
}

// Initialize ticks when the page loads
$(document).ready(function() {
    updateScrollbarTicks();
});

// Update ticks if the window is resized (viewport height changes)
$(window).resize(function() {
    updateScrollbarTicks();
});

3. Bonus: Handle Container-Specific Scrolling #

If your list is inside a fixed-height container (not scrolling the entire body), adjust the code to target that container instead:

• Replace $(document).height() with $('#your-container').height()
• Replace item.offset().top with item.position().top (relative to the container)
• Update the scroll target to $('#your-container').animate({ scrollTop: ... })

Final Notes #

• Tweak the tick color, size, and animation to match your project's design
• If you have very many highlighted items, you can add logic to merge overlapping ticks for better readability
• Test on different screen sizes to ensure ticks position correctly

Hope this helps you build exactly what you're looking for!

内容的提问来源于stack exchange，提问作者Daobosa