Reserve Space for ScrollViewer

css reserve space for scrollbar
scrollbar-gutter
css overlay scrollbar
overflow: overlay
css scrollbar on top of content
moving scrollbar css
css hands on scroll bar
transparent scrollbar over content

I've got a ScrollViewer round some controls and with

<ScrollViewer VerticalScrollBarVisibility="Auto">
   ...some controls here...
</ScrollViewer>

by default it doesn't reserve the space needed to show the scroll bar. This means that when it's shown/hidden my controls are squished and expanded again.

How can I reserve space for the scroll bar? Is there some kind of property or style I can set which means when it's not needed it's set to hidden rather than collapsed? Or do my child controls need a 'padding' or something on their right hand side to leave the space? Should I put the controls in a grid and make a scroll viewer sized column for the scroll bar to be displayed in (somehow)?

I would like it still to be invisible when not required I would just like the best way of making it reserve the space for when it is.

Thanks all.

here is a sample

this will reserve the scroll bar space when it is not visible by using a border as placeholder

    <ScrollViewer VerticalScrollBarVisibility="auto" x:Name="scroll">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="auto" />
            </Grid.ColumnDefinitions>
            <Border Background="LightGoldenrodYellow"
                    Height="300" />
            <Border Grid.Column="1"
                    Width="{x:Static SystemParameters.VerticalScrollBarWidth}">
                <Border.Style>
                    <Style TargetType="Border">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ComputedVerticalScrollBarVisibility, ElementName=scroll}"
                                         Value="Visible">
                                <Setter Property="Visibility"
                                        Value="Collapsed" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
            </Border>
        </Grid>
    </ScrollViewer>

the first border is the content and the second border is the placeholder for reserving the space for scrollbar. you can choose to replace with element of your choice

Define as a reusable template

<Grid>
    <Grid.Resources>
        <ControlTemplate x:Key="ReservedSpaceScroller" TargetType="ContentControl">
            <ScrollViewer VerticalScrollBarVisibility="auto"
                          x:Name="scroll">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="auto" />
                    </Grid.ColumnDefinitions>
                    <ContentPresenter />
                    <Border Width="{x:Static SystemParameters.VerticalScrollBarWidth}"
                            x:Name="placeholder" Grid.Column="1" />
                </Grid>
            </ScrollViewer>
            <ControlTemplate.Triggers>
                <DataTrigger Binding="{Binding ComputedVerticalScrollBarVisibility, ElementName=scroll}"
                             Value="Visible">
                    <Setter TargetName="placeholder"
                            Property="Visibility"
                            Value="Collapsed" />
                </DataTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Grid.Resources>

    <ContentControl Template="{StaticResource ReservedSpaceScroller}">
        <Border Background="LightGoldenrodYellow"
                Height="300" />
    </ContentControl>
</Grid>

result

HTML reserve space for scrollbar, The only way to do this is to make the width of the items in the container fixed. And you'll have to be conservative with the width of the scrollbar. The ScrollViewer control provides a convenient way to enable scrolling of content in Windows Presentation Foundation (WPF) applications. This topic introduces the ScrollViewer element and provides several usage examples. The ScrollViewer Control. There are two predefined elements that enable scrolling in WPF applications: ScrollBar and

If you want the ScrollViewer to always 'reserve space' for its ScrollBar, then you can do this:

<ScrollViewer VerticalScrollBarVisibility="Visible">
    ...some controls here...
</ScrollViewer>

This will show the ScrollBar even when it is not required, but it will not make your controls squished and expanded when it is required.

HTML reserve space for scrollbar, I have a div that may overflow as content is added or removed. However the UI designer does not want a visible, but inactive scrollbar (as with overflow: scroll),� What the internal ScrollViewer does here is to make it possible to scroll the area where the app is, if scrolling it is forced because the keyboard is taking UI space. Starting with Windows 8.1, the system still has UI/layout behavior when the On-Screen Keyboard appears, but it no longer uses this internally created ScrollViewer.

I've tried the answer of pushpraj but found out, that there is still a resize happening on the content because SystemParameters.VerticalScrollBarWidth gives you just the Width of the pure Scrollbar although it can have Margins to it.

So I came up with a Behaviour which sets directly the Visibility of the ScrollBar. First just create a class called ScrollViewerHiddenScrollbarsBehaviour and implement it like this:

/// <summary>
/// Set the ScrollBars of a ScrollViewer to Hidden (instead of Collasped) when they are not needed.
/// </summary>
/// <seealso cref="MTM.UI.Behaviors.FrameworkElementBehaviorBase{System.Windows.Controls.ScrollViewer}" />
public class ScrollViewerHiddenScrollbarsBehaviour : FrameworkElementBehaviorBase<ScrollViewer>
{
    private ScrollBar _verticalScrollBar;
    private ScrollBar _horizontalScrollBar;

    /// <summary>
    /// Setup the Behaviour
    /// </summary>
    protected override void Setup()
    {
        AssociatedObject.Loaded += OnLoaded;
    }

    private void OnLoaded(object sender, RoutedEventArgs e)
    {
        // Getting the ScrollBars IF they are set to ScrollBarVisibility.Auto
        _verticalScrollBar = AssociatedObject.VerticalScrollBarVisibility != ScrollBarVisibility.Auto ? null :
            AssociatedObject.Template.FindName("PART_VerticalScrollBar", AssociatedObject) as ScrollBar;
        _horizontalScrollBar = AssociatedObject.HorizontalScrollBarVisibility != ScrollBarVisibility.Auto ? null :
            AssociatedObject.Template.FindName("PART_HorizontalScrollBar", AssociatedObject) as ScrollBar;

        if (_verticalScrollBar != null) {
            // When changing the Visibility of the ScrollBar directly it won't get updated anymore when the ScrollViewer
            // needs it. So let's do this manually.
            DependencyPropertyDescriptor
              .FromProperty(ScrollViewer.ComputedVerticalScrollBarVisibilityProperty, typeof(ScrollViewer))
              .AddValueChanged(AssociatedObject, VerticalHandler);
            VerticalHandler(null, null);
        }
        if (_horizontalScrollBar != null) {
            // When changing the Visibility of the ScrollBar directly it won't get updated anymore when the ScrollViewer
            // needs it. So let's do this manually.
            DependencyPropertyDescriptor
                .FromProperty(ScrollViewer.ComputedHorizontalScrollBarVisibilityProperty, typeof(ScrollViewer))
                .AddValueChanged(AssociatedObject, HorizontalHandler);
            HorizontalHandler(null, null);
        }
    }

    /// <summary>
    /// Sets the Visibility of the vertical ScrollBar as needed by the ScrollViewer, BUT Hidden instead of collapsed
    /// </summary>
    private void VerticalHandler(object sender, EventArgs e)
    {
        if (_verticalScrollBar == null)
            return;

        _verticalScrollBar.Visibility = AssociatedObject.ComputedVerticalScrollBarVisibility == Visibility.Visible
            ? Visibility.Visible
            : Visibility.Hidden;
    }

    /// <summary>
    /// Sets the Visibility of the horizontal ScrollBar as needed by the ScrollViewer, BUT Hidden instead of collapsed
    /// </summary>
    private void HorizontalHandler(object sender, EventArgs e)
    {
        if (_horizontalScrollBar == null)
            return;

        _horizontalScrollBar.Visibility = AssociatedObject.ComputedHorizontalScrollBarVisibility == Visibility.Visible
            ? Visibility.Visible
            : Visibility.Hidden;
    }

    /// <summary>
    /// Cleanup the Behaviour
    /// </summary>
    protected override void Cleanup()
    {
        AssociatedObject.Loaded -= OnLoaded;

        DependencyPropertyDescriptor
            .FromProperty(ScrollViewer.ComputedVerticalScrollBarVisibilityProperty, typeof(ScrollViewer))
            .RemoveValueChanged(AssociatedObject, VerticalHandler);
        DependencyPropertyDescriptor
            .FromProperty(ScrollViewer.ComputedHorizontalScrollBarVisibilityProperty, typeof(ScrollViewer))
            .RemoveValueChanged(AssociatedObject, HorizontalHandler);
    }
}

Usage is as simple as this:

<ScrollViewer VerticalScrollBarVisibility="auto">
    <i:Interaction.Behaviors>
        <behaviors:ScrollViewerHiddenScrollbarsBehaviour />
    </i:Interaction.Behaviors>

    <Border Background="LightGoldenrodYellow"
            Height="300" />
    </Border>
</ScrollViewer>

Hope this helps

scrollbar-gutter, The spec describes it “reserving space for the scrollbar” and that makes sense since that's what a gutter ultimately is: a container that reserves� Reserve needs to collect and store your name, email, and organization to provide you with the information or services you are requesting. By clicking the Submit button below, you consent to our collection and storing of this data and that we may transfer this data to third-party platforms, including MailChimp and Zapier.

Always reserve space for scrollbar?, Hi, I have a website that sometimes has a scrollbar, and sometimes it doesn't. Because of that the positioning of the background pattern is not� Reserve Space University Scheduling is your resource for requesting and reserving campus space. The Scheduling office, located at 71 University Place, serves as a one stop shop for all rooms on campus, reserving rooms managed by the Office of the Registrar and facilitating the reservation of rooms managed by academic departments.

Css reserve space for scrollbar, Css reserve space for scrollbar. No horizontal scrollbar, ever. p {white-space: normal} text. I would like to thank all the people who have been involved, specially� First published on TECHNET on Jan 07, 2019 Reserving disk space to keep Windows 10 up to date Windows Insiders: To enable this new feature now, please see the last section "Testing out Storage Reserve" and complete the quest Starting with the next major update we’re making a few changes to h

Element size and scrolling, Some browsers (not all) reserve the space for it by taking it from the content ( labeled as “content width” above). So, without scrollbar the content� 10 Reserve Space for ScrollViewer; View more network posts → Top tags (5) discussion. Score 3. Posts 2. flags. Score 0. Posts 1. support. Score 0. Posts 1. not-an

Comments
  • check ComputedVerticalScrollBarVisibility if helps prntscr.com/41jx4u
  • Perfect - thank you! Exactly what I was looking for!
  • Sorry - maybe I should have clarified, I would like it invisible when not required, but just invisible - not collapsed!