Microsoft Bot Framework v4富卡片滚动条实现方案咨询

Got it, I’ve run into this exact UX pain point before when building bots with tons of action buttons—making users scroll the entire chat window just to pick an option is really frustrating. Let’s fix this using Adaptive Cards (they’re the most flexible for custom layouts in Bot Framework v4) with two solid solutions:

1. Use Adaptive Card’s Scrollable Component (Recommended, v1.5+) #

Adaptive Card added the Scrollable component in version 1.5 specifically for this scenario. You can wrap all your buttons in this container, set a fixed height, and the button area will scroll independently without affecting the rest of the chat.

Example Code (C#) #

// Initialize an Adaptive Card with v1.5 schema support
var adaptiveCard = new AdaptiveCard(new AdaptiveSchemaVersion(1, 5))
{
    Body = new List<AdaptiveElement>
    {
        new AdaptiveTextBlock { Text = "Choose an Option", Size = AdaptiveTextSize.Large },
        new AdaptiveScrollable
        {
            Height = "320px", // Set a reasonable fixed height for the scroll area
            Items = new List<AdaptiveElement>()
        }
    }
};

// Loop through your options and add buttons to the Scrollable container
foreach (var option in yourOptionCollection)
{
    adaptiveCard.Body.OfType<AdaptiveScrollable>().First().Items.Add(
        new AdaptiveActionSet
        {
            Actions = new List<AdaptiveAction>
            {
                new AdaptiveSubmitAction
                {
                    Title = option.DisplayName,
                    Data = new { OptionId = option.Id }
                }
            }
        }
    );
}

// Send the card as an attachment
var reply = MessageFactory.Attachment(new Attachment
{
    ContentType = AdaptiveCard.ContentType,
    Content = adaptiveCard
});
await turnContext.SendActivityAsync(reply, cancellationToken);

Example Code (Node.js) #

const adaptiveCard = {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.5",
    "body": [
        {
            "type": "TextBlock",
            "text": "Choose an Option",
            "size": "Large"
        },
        {
            "type": "Scrollable",
            "height": "320px",
            "items": []
        }
    ]
};

// Populate buttons in the scrollable area
yourOptionCollection.forEach(option => {
    adaptiveCard.body[1].items.push({
        "type": "ActionSet",
        "actions": [
            {
                "type": "Action.Submit",
                "title": option.displayName,
                "data": { "OptionId": option.id }
            }
        ]
    });
});

// Send the card
const reply = {
    attachments: [
        {
            contentType: "application/vnd.microsoft.card.adaptive",
            content: adaptiveCard
        }
    ]
};
await context.sendActivity(reply);

2. Custom Web Chat CSS (For Older Adaptive Card Versions) #

If your environment doesn’t support Adaptive Card v1.5+, you can add custom CSS to Web Chat to make the button container scrollable.

Step 1: Add a Custom Class to Your Card #

Add a className to the container holding your buttons (note: you need to enable custom CSS support in Web Chat):

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "Container",
            "className": "scrollable-btn-container",
            "items": [
                // Your button ActionSet items go here
            ]
        }
    ]
}

Step 2: Add Custom CSS to Web Chat #

Inject this CSS into your Web Chat instance to enable scrolling:

.scrollable-btn-container {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 8px; /* Give space for the scrollbar */
}

/* Optional: Style the scrollbar for better UX */
.scrollable-btn-container::-webkit-scrollbar {
    width: 6px;
}

.scrollable-btn-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.scrollable-btn-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.scrollable-btn-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

Quick Notes #

• Channel Compatibility: The Scrollable component works in Web Chat, modern Teams, and the Bot Framework Emulator. Test with your target channels first.
• Height Tuning: Stick to heights between 300-400px to keep the scroll area within most users’ viewport.
• Bonus UX Win: If you have tons of options, add a search filter above the scrollable area to let users narrow down choices faster.

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