.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb默认显示
时间: 2023-07-08 20:41:18 浏览: 86
要让element的横向滚动条默认显示,可以通过给滚动条的样式添加 `opacity: 1` 和 `display: block`,以强制显示滚动条。
具体实现代码如下:
```css
.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
opacity: 1;
display: block;
}
```
在上面的代码中,我们给滚动条的样式添加了 `opacity: 1` 和 `display: block`,以强制显示滚动条。这样就可以让element的横向滚动条默认显示了。
需要注意的是,如果滚动条被隐藏了,可能是因为滚动条的父元素设置了 `overflow: hidden`,这时需要把滚动条的父元素的 `overflow` 属性改为 `auto` 或 `scroll`,才能让滚动条显示。
相关问题
WPF scrollbar滚动量修改
要修改 WPF ScrollBar 的滚动量,可以使用 ScrollViewer 控件。在 ScrollViewer 中,可以通过修改 VerticalScrollBar 或 HorizontalScrollBar 的 SmallChange 或 LargeChange 属性来修改滚动量。
例如,如果要将 ScrollBar 的滚动量从默认的 16 修改为 20,可以在 XAML 中添加以下代码:
```xml
<ScrollViewer>
<ScrollViewer.Resources>
<!-- 获取垂直 ScrollBar -->
<Style TargetType="ScrollBar">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Width" Value="18"/>
<Setter Property="Minimum" Value="0"/>
<Setter Property="Maximum" Value="100"/>
<Setter Property="Orientation" Value="Vertical"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollBar">
<Grid x:Name="GridRoot" Width="18" Background="{StaticResource DarkBrush}">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="18"/>
<RowDefinition Height="0.00001*"/>
<RowDefinition MaxHeight="18"/>
</Grid.RowDefinitions>
<RepeatButton x:Name="LineUpButton" Command="ScrollBar.LineUpCommand" Background="{StaticResource DarkBrush}" Content="M 0 4 L 8 4 L 4 0 Z" Height="18" Visibility="Collapsed"/>
<Track x:Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
<Track.DecreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageUpCommand" Background="{StaticResource DarkBrush}"/>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb" Background="{StaticResource LightBrush}" BorderBrush="{StaticResource DarkBrush}" BorderThickness="1" Width="12"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageDownCommand" Background="{StaticResource DarkBrush}"/>
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton x:Name="LineDownButton" Grid.Row="2" Command="ScrollBar.LineDownCommand" Background="{StaticResource DarkBrush}" Content="M 0 0 L 4 4 L 8 0 Z" Height="18" Visibility="Collapsed"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Thumb" Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="Orientation" Value="Horizontal">
<Setter TargetName="GridRoot" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
<Setter TargetName="PART_Track" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
<Setter Property="Width" Value="Auto"/>
<Setter Property="Height" Value="18"/>
<Setter TargetName="LineUpButton" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
<Setter TargetName="LineDownButton" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
</Trigger>
<!-- 修改 SmallChange 和 LargeChange -->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="GridRoot" Value="{StaticResource LightBrush}"/>
<Setter Property="Visibility" TargetName="LineUpButton" Value="Visible"/>
<Setter Property="Visibility" TargetName="LineDownButton" Value="Visible"/>
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Setter Property="Background" TargetName="GridRoot" Value="{StaticResource LightBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ScrollViewer.Resources>
<!-- 添加内容 -->
<StackPanel>
<TextBlock Text="1"/>
<TextBlock Text="2"/>
<TextBlock Text="3"/>
<TextBlock Text="4"/>
<TextBlock Text="5"/>
<TextBlock Text="6"/>
<TextBlock Text="7"/>
<TextBlock Text="8"/>
<TextBlock Text="9"/>
<TextBlock Text="10"/>
<TextBlock Text="11"/>
<TextBlock Text="12"/>
<TextBlock Text="13"/>
<TextBlock Text="14"/>
<TextBlock Text="15"/>
<TextBlock Text="16"/>
<TextBlock Text="17"/>
<TextBlock Text="18"/>
<TextBlock Text="19"/>
<TextBlock Text="20"/>
</StackPanel>
</ScrollViewer>
```
在上面的代码中,我们通过修改 ScrollBar 的 SmallChange 和 LargeChange 属性,将滚动量从默认的 16 修改为 20。
请注意,这里的代码是针对垂直 ScrollBar 的。如果需要修改水平 ScrollBar 的滚动量,可以在上面的代码中,将 Orientation 属性设置为 Horizontal,并将 Width 和 Height 的值交换。
修改bootstrapTable的滚动条
BootstrapTable 默认会自动生成一个滚动条,如果需要修改样式可以通过 CSS 进行调整。以下是一个简单的示例 CSS:
```css
/* 自定义 BootstrapTable 滚动条 */
.bootstrap-table .fixed-table-body::-webkit-scrollbar {
width: 8px;
}
.bootstrap-table .fixed-table-body::-webkit-scrollbar-track {
background-color: #eee;
}
.bootstrap-table .fixed-table-body::-webkit-scrollbar-thumb {
background-color: #888;
}
.bootstrap-table .fixed-table-body::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
```
在上面的示例中,我们使用了 `::-webkit-scrollbar` 伪元素来定义滚动条样式。`width` 属性用于设置滚动条宽度,`background-color` 则用于设置滚动条背景色和手柄颜色。通过调整这些属性,可以自定义 BootstrapTable 的滚动条样式。
如果需要修改纵向滚动条的样式,可以使用 `.fixed-table-body::-webkit-scrollbar-vertical` 选择器来进行设置。类似地,如果需要修改横向滚动条的样式,可以使用 `.fixed-table-header::-webkit-scrollbar-horizontal` 选择器。