MAUI Blazor如何隐藏滚动条
MAUI Blazor如何隐藏滚动条
Windows
在Windows上是最简单的,改css就可以了,把下面这段添加到app.css中
::-webkit-scrollbar {
display: none;
}
安卓
安卓和iOS有点复杂,需要通过webview
- 修改csproj文件,添加以下内容
<ItemGroup Condition="$(TargetFramework.StartsWith('net7.0-android')) != true">
<Compile Remove="**\**\*.Android.cs" />
<None Include="**\**\*.Android.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
</ItemGroup>
<ItemGroup Condition="$(TargetFramework.StartsWith('net7.0-ios')) != true AND $(TargetFramework.StartsWith('net7.0-maccatalyst')) != true">
<Compile Remove="**\**\*.iOS.cs" />
<None Include="**\**\*.iOS.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
</ItemGroup>
<ItemGroup Condition="$(TargetFramework.Contains('-windows')) != true ">
<Compile Remove="**\*.Windows.cs" />
<None Include="**\*.Windows.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
</ItemGroup>
- 修改MainPage.xaml
- 修改MainPage.xaml.cs
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
_blazorWebView.BlazorWebViewInitializing += BlazorWebViewInitializing;
_blazorWebView.BlazorWebViewInitialized += BlazorWebViewInitialized;
}
private partial void BlazorWebViewInitializing(object? sender, BlazorWebViewInitializingEventArgs e);
private partial void BlazorWebViewInitialized(object? sender, BlazorWebViewInitializedEventArgs e);
}
- 添加MainPage.xaml.Android.cs文件
public partial class MainPage
{
private partial void BlazorWebViewInitializing(object? sender, BlazorWebViewInitializingEventArgs e)
{
}
private partial void BlazorWebViewInitialized(object? sender, BlazorWebViewInitializedEventArgs e)
{
e.WebView.VerticalScrollBarEnabled = false;
}
}
iOS
与安卓一致
添加MainPage.xaml.iOS.cs文件
public partial class MainPage
{
private partial void BlazorWebViewInitializing(object? sender, BlazorWebViewInitializingEventArgs e)
{
e.Configuration.AllowsInlineMediaPlayback = true;
e.Configuration.MediaTypesRequiringUserActionForPlayback = WebKit.WKAudiovisualMediaTypes.None;
}
private partial void BlazorWebViewInitialized(object? sender, BlazorWebViewInitializedEventArgs e)
{
e.WebView.ScrollView.ShowsVerticalScrollIndicator = false;
}
}
下面这段最好也加上
添加MainPage.xaml.Windows.cs文件
public partial class MainPage
{
private partial void BlazorWebViewInitializing(object? sender, BlazorWebViewInitializingEventArgs e)
{
}
private partial void BlazorWebViewInitialized(object? sender, BlazorWebViewInitializedEventArgs e)
{
}
}
MAUI Blazor如何隐藏滚动条的更多相关文章
- IWebBrowser隐藏滚动条
刚才在项目里看到一个IWebBrowser2,竟然需要通过MoveWindow的方式把滚动条遮挡,如果要缩小IWebBrowser2控件的显示大小呢?这种方法至少我用不习惯,起码也得从源头解决这样的问 ...
- 实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- css隐藏滚动条
xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...
- HTML5 元素超出部分滚动, 并隐藏滚动条
方法一, 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html> <html> <head ...
- sencha touch 隐藏滚动条样式的几种方式
如图,当滚动条显示时不是那么的好看 可以通过以下几种方式来隐藏滚动条,而又不影响滚动效果 1.通过css隐藏 /* 隐藏x方向滚动条 */ .x-scroll-bar-x.active { wid ...
- vue 隐藏滚动条
element-ui隐藏组件scrollbar: <el-scrollbar style="height:100%"> </el-scrollbar> 真正 ...
- 前端福利之overflow-scrol 怎么隐藏滚动条(转)
最近用vue写wap站的时候遇到了微信打开页面滚动条无法隐藏的问题. 对于隐藏滚动条,我们最常用的方法首先是: 1.使用以下CSS可以隐藏滚动条: .container::-webkit-scroll ...
- 纯css实现隐藏滚动条仍可以滚动
移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,overflow:hidden;虽然可以隐藏滚动条,但是不能滚动.需要实现隐藏滚动条但是仍可以滚动,js实现太麻烦,直接将滚动条隐藏会更好一些. ...
- CSS 实现隐藏滚动条同时又可以滚动(转)
CSS 实现隐藏滚动条同时又可以滚动 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚 ...
- 如何使用CSS隐藏滚动条并且兼容大部分浏览器
隐藏滚动条,已经自己实测在浏览器Chrome, IE (6+), Firefox, Opera, Safari. 如下demo: Content 1 Content 1 Content 1 Conte ...
随机推荐
- ES6教程笔记
ES介绍 什么是ES ES全称 EcmaScript 是一种脚本语言的规范 Javascript为ES的实现 Ecma 是一个组织 Ecma组织 为什么要学习ES6? ES6的版本变动内容最多,具有里 ...
- 【原型设计模式详解】C/Java/JS/Go/Python/TS不同语言实现
简介 原型模式(Prototype Pattern)是一种创建型设计模式,使你能够复制已有对象,而无需使代码依赖它们所属的类,同时又能保证性能. 这种模式是实现了一个原型接口,该接口用于创建当前对象的 ...
- Caused by: java.net.BindException: Address already in use: JVM_Bind(ActiveMq已经启动)
1.本地启动项目开启两个启动类出错. Error creating bean with name 'brokerService' defined in class path resource [com ...
- 音频处理库性能对比:计算mel频谱的速度哪个更快?
介绍 音频信号处理在各种应用中都发挥着重要的作用,如语音识别.音乐信息检索.语音合成等.其中,Mel频谱是一种常用的频域特征表示方法,用于描述人类听觉系统对频率的敏感程度. 在深度学习音频领域,mel ...
- for of 和 for in 的区别
1 var arr = ["f", "6", 3, "a", 7]; 2 var obj = { name: "shun" ...
- Python 项目:外星人入侵----第一部分
外星人入侵 1.规划项目 玩家控制着一艘最初出现在屏幕底部中央的飞船,玩家可以使用箭头键左右移动飞船,还可以使用空格键进行射击,游戏开始时,一群外星人出现在天空中,他们在屏幕中下移动.玩家任务是射杀这 ...
- 2022-04-08:在一张 无向 图上,节点编号0~N-1。老鼠开始在1节点,猫在2节点,0号节点是洞,老鼠想进洞, 老鼠第先出发,猫后出发,轮流行动。 在每个玩家的行动中,他们 必须 沿着图中与所
2022-04-08:在一张 无向 图上,节点编号0~N-1.老鼠开始在1节点,猫在2节点,0号节点是洞,老鼠想进洞, 老鼠第先出发,猫后出发,轮流行动. 在每个玩家的行动中,他们 必须 沿着图中与所 ...
- Selenium - 元素操作(3) - 下拉框操作
Selenium - 元素操作 下拉框才做可以分为两类: select标签的下拉框:使用Select类进行操作: 非select标签的下拉框:一般是 ul,li, div 等标签组成,使用元素定位的方 ...
- SQL Server临时表删除
SQL Server临时表删除 IF (SELECT object_id('tempdb..#tmpacqichu')) is not null DROP TABLE #tmpacqichu
- 这款全自动自适应工具你用过了吗?autofit.js请求加入你的战场!
前段时间做了一个自适应的小工具(autofit.js) 经过一段时间的试用,同学们发现了工具存在的一些问题,我自己也发现了一些,这篇文章是针对这些问题撰写的. autofit.js autofit.j ...