Windows UWP ScrollViewer 滚动条与内容重叠

Question

如何阻止 ScrollViewer 的滚动条像这样重叠内容？

我有一个包含文本的 RichTextBlock，无论我将 RichTextBlock 设置多宽，或者我如何更改边距和填充值，我都无法让滚动条进一步向右移动以阻止这种重叠的发生。我是运行 Windows 10，它被配置为隐藏滚动条，直到鼠标指针悬停在滚动条上。

下面是我的应用程序的 XAML。

<Page
    x:Class="PaulWinPOS1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PaulWinPOS1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid Margin="0,26,0,0">
        <Button x:Name="butConnect" Content="Connect" Margin="0,38,48,0" VerticalAlignment="Top" RenderTransformOrigin="-3.274,0.344" HorizontalAlignment="Right" Height="32" Click="ButConnect_Click" Width="92"/>
        <Button x:Name="butLogin" Content="Login" Margin="0,92,48,0" VerticalAlignment="Top" RenderTransformOrigin="-3.274,0.344" HorizontalAlignment="Right" Height="32" Width="92" IsEnabled="False" Click="ButLogin_Click"/>
        <Button x:Name="butAdd" Content="Add Item" Margin="0,143,48,0" VerticalAlignment="Top" RenderTransformOrigin="-3.274,0.344" HorizontalAlignment="Right" Width="92" IsEnabled="False" Click="ButAdd_Click"/>

        <ScrollViewer x:Name="scrollViewerWeb" 
            HorizontalScrollBarVisibility="Auto"
            VerticalScrollBarVisibility="Auto" 
            HorizontalAlignment="Left"
            Width="350"
            Padding="16,0"
            Grid.RowSpan="10"
            FontFamily="Segoe UI" RequestedTheme="Dark" ZoomMode="Enabled" 
            Margin="669,304,0,0" >
            <WebView x:Name="webviewReceipt" 
                Margin="10,10,50,10"
                HorizontalAlignment="Left" 
                Height="333" Width="300"
                VerticalAlignment="Top"
                ScrollViewer.VerticalScrollMode="Enabled"
                ScrollViewer.VerticalScrollBarVisibility="Visible" />
        </ScrollViewer>
        
        <Button x:Name="butDisconnect" Content="Disconnect" Margin="0,244,48,0" VerticalAlignment="Top" RenderTransformOrigin="-3.274,0.344" HorizontalAlignment="Right" Height="32" Width="92" Click="ButDisconnect_Click"/>


    </Grid>
</Page>

Answer 1

您需要在 ScrollViewer 中添加一个 Padding。

<ScrollViewer Padding="18, 0">
    <RichTextBlock />
</ScrollViewer>

通常 ScrollBar 宽度为 18。

Answer 2

您似乎在 Web 视图和滚动查看器上都启用了滚动条。您可以尝试禁用其中之一的滚动条，看看是否有所不同。

Answer 3

WebView的滚动条比较特殊，无法通过常规的ScrollViewer附加属性解决，但是可以通过网页的CSS禁用WebView的滚动条

body {
   -ms-overflow-style: none;
}

如果无法修改网页源代码，可以在加载WebView内容后进行如下操作：

private async void webviewReceipt_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
{
    string js = "var style = document.createElement('style');" +
               "style.type = 'text/css';" +
               "style.innerHTML = \"body{ -ms-overflow-style: none !important; }\";" +
               "document.getElementsByTagName('Head').item(0).appendChild(style); ";
    await webviewReceipt.InvokeScriptAsync("eval", new string[] { js });
}

更新

如果我们需要显示滚动条，可以在body中加一个padding-right，这样滚动条就不会挡住内容了

private async void webviewReceipt_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
{
    string js = "var style = document.createElement('style');" +
               "style.type = 'text/css';" +
               "style.innerHTML = \"body{ padding-right: 24px; }\";" +
               "document.getElementsByTagName('Head').item(0).appendChild(style); ";
    await webviewReceipt.InvokeScriptAsync("eval", new string[] { js });
}

Windows UWP ScrollViewer 滚动条与内容重叠

Windows UWP ScrollViewer scrollbar overlaps contents

xaml

uwp

winrt-xaml