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 ...
随机推荐
- c语言趣味编程(1)百钱百鸡
一.问题描述 百钱买百鸡问题:公鸡五文钱一只,母鸡三文钱一只,小鸡三只一文钱,用100文钱买100只鸡,公鸡.母鸡.小鸡各买多少只 二.设计思路 (1)定义三个变量下x,y,z代表公鸡,母鸡,小鸡的数 ...
- Object-Advanced笔记
JavaScript对象进阶 数据劫持 1. 概念 一旦访问或者修改对象的属性时 拦截这个行为(访问/修改) 并对其添加除这个行为外的操作 最后返回结果 2. 实现 2.1 getter和setter ...
- vue中父组件给子组件传值的方法
顺序............................................. -------------列表组件,注册组件.调用使用组件----------------- 1,子组件 ...
- C++ Primer 5th 阅读笔记:变量和基本类型
一些语言的公共特性 内建类型,如整型,字符型等: 变量,为值绑定的一个名字: 表达式和语句,操作值. 分支和循环,允许我们条件执行和重复执行: 函数,定义抽象计算单元. 扩展语言的方式 自定义类型: ...
- 2021-04-10:给定两个可能有环也可能无环的单链表,头节点head1和head2。请实现一个函数,如果两个链表相交,请返回相交的 第一个节点。如果不相交,返回null。【要求】如果两个链表长度之和为N,时间复杂度请达到O(N),额外空间复杂度 请达到O(1)。
2021-04-10:给定两个可能有环也可能无环的单链表,头节点head1和head2.请实现一个函数,如果两个链表相交,请返回相交的 第一个节点.如果不相交,返回null.[要求]如果两个链表长度之 ...
- 2022-03-07:K 个关闭的灯泡。 N 个灯泡排成一行,编号从 1 到 N 。最初,所有灯泡都关闭。每天只打开一个灯泡,直到 N 天后所有灯泡都打开。 给你一个长度为 N 的灯泡数组 blubs
2022-03-07:K 个关闭的灯泡. N 个灯泡排成一行,编号从 1 到 N .最初,所有灯泡都关闭.每天只打开一个灯泡,直到 N 天后所有灯泡都打开. 给你一个长度为 N 的灯泡数组 blubs ...
- 与世界分享我刚编的mysql http隧道工具-hersql原理与使用
原文地址:https://blog.fanscore.cn/a/53/ 1. 前言 本文是与世界分享我刚编的转发ntunnel_mysql.php的工具的后续,之前的实现有些拉胯,这次重构了下.需求背 ...
- 一分钟学一个 Linux 命令 - pwd
前言 大家好,我是 god23bin.欢迎大家继续围观<一分钟学一个 Linux 命令>,每天只需一分钟,记住一个 Linux 命令不成问题.本篇文章将聚焦于 pwd 命令,一个超级简单又 ...
- 1.ruoyi-ui部署
1.ruoyi-ui 部署 A.用 idea 打开 ruoyi-ui 项目后,点击左下角的这个按钮 B.运行 build:prod 后,会在项目文件夹下生成dist文件夹(里面大概有这些文件) C.将 ...
- karyoploteR: 基因组数据可视化 R 包
karyoploteR,是一个适用于所有基因组数据(any data on any genome)非圆环布局(non-circular layouts)的可视化 R/Bioconductor 包.开发 ...