MAUI Blazor如何隐藏滚动条

Windows

在Windows上是最简单的,改css就可以了,把下面这段添加到app.css中

::-webkit-scrollbar {
display: none;
}

安卓

安卓和iOS有点复杂,需要通过webview

  1. 修改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>
  1. 修改MainPage.xaml

  2. 修改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);
}
  1. 添加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如何隐藏滚动条的更多相关文章

  1. IWebBrowser隐藏滚动条

    刚才在项目里看到一个IWebBrowser2,竟然需要通过MoveWindow的方式把滚动条遮挡,如果要缩小IWebBrowser2控件的显示大小呢?这种方法至少我用不习惯,起码也得从源头解决这样的问 ...

  2. 实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...

  3. css隐藏滚动条

    xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...

  4. HTML5 元素超出部分滚动, 并隐藏滚动条

    方法一, 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html> <html> <head ...

  5. sencha touch 隐藏滚动条样式的几种方式

    如图,当滚动条显示时不是那么的好看   可以通过以下几种方式来隐藏滚动条,而又不影响滚动效果 1.通过css隐藏 /* 隐藏x方向滚动条 */ .x-scroll-bar-x.active { wid ...

  6. vue 隐藏滚动条

    element-ui隐藏组件scrollbar: <el-scrollbar style="height:100%"> </el-scrollbar> 真正 ...

  7. 前端福利之overflow-scrol 怎么隐藏滚动条(转)

    最近用vue写wap站的时候遇到了微信打开页面滚动条无法隐藏的问题. 对于隐藏滚动条,我们最常用的方法首先是: 1.使用以下CSS可以隐藏滚动条: .container::-webkit-scroll ...

  8. 纯css实现隐藏滚动条仍可以滚动

    移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,overflow:hidden;虽然可以隐藏滚动条,但是不能滚动.需要实现隐藏滚动条但是仍可以滚动,js实现太麻烦,直接将滚动条隐藏会更好一些. ...

  9. CSS 实现隐藏滚动条同时又可以滚动(转)

    CSS 实现隐藏滚动条同时又可以滚动 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚 ...

  10. 如何使用CSS隐藏滚动条并且兼容大部分浏览器

    隐藏滚动条,已经自己实测在浏览器Chrome, IE (6+), Firefox, Opera, Safari. 如下demo: Content 1 Content 1 Content 1 Conte ...

随机推荐

  1. 3520. 【NOIP2013模拟11.7B组】原根(math)

    题目: 考试想法: 考试的时候觉得这些数学公式太恶心了,所以就直接跳过了. 正解: 直接暴力模拟就可以了. 代码: #include<bits/stdc++.h> using namesp ...

  2. 【介绍】.NET新加特性介绍

    ​ 简介 当下的.Net新版本引进了几种新特性,包括全局命名空间引用.可空引用类型和顶级语句.这些特性在一定程度上改善了 .NET 平台的开发效率, 对于短小精干的小程序,这些新的特性无疑可以把开发效 ...

  3. Spring源码:Bean的生命周期(二)

    前言 让我们继续讲解Spring的Bean实例化过程.在上一节中,我们已经讲解了Spring是如何将Bean定义加入到IoC容器中,并使用合并的Bean定义来包装原始的Bean定义.接下来,我们将继续 ...

  4. 使用 Semantic Kernel 实现 Microsoft 365 Copilot 分析

    3月16日,微软发布了微软365 Copilot[1]. Microsoft 365 Copilot 将您现有的 Word.Excel.PowerPoint.Outlook 和 Teams 与大型语言 ...

  5. 2022-03-30:有m个同样的苹果,认为苹果之间无差别, 有n个同样的盘子,认为盘子之间也无差别, 还有,比如5个苹果如果放进3个盘子, 那么1、3、1和1、1、3和3、1、1的放置方法,也认为是

    2022-03-30:有m个同样的苹果,认为苹果之间无差别, 有n个同样的盘子,认为盘子之间也无差别, 还有,比如5个苹果如果放进3个盘子, 那么1.3.1和1.1.3和3.1.1的放置方法,也认为是 ...

  6. 2022-01-11:给定一个正数数组arr长度为n、正数x、正数y。 你的目标是让arr整体的累加和<=0, 你可以对数组中的数num执行以下三种操作中的一种,且每个数最多能执行一次操作 : 1.

    2022-01-11:给定一个正数数组arr长度为n.正数x.正数y. 你的目标是让arr整体的累加和<=0, 你可以对数组中的数num执行以下三种操作中的一种,且每个数最多能执行一次操作 : ...

  7. python 之路,致那些年,我们依然没搞明白的编码

    摘自:金角大王https://www.cnblogs.com/alex3714/articles/7550940.html 本节内容 编码回顾 编码转换 Python的bytes类型 编码回顾 在备编 ...

  8. nginx发布vue 项目

    在本次使用nginx发布vue项目遇到 配置location 始终404 和 在项目子目录点击浏览器刷新出现404问题 使用nginx发布vue项目,为了方便测试就下载了一个nginx 放置自己目录下 ...

  9. weexplus真机调试

    一.连接真机 C:\Users\Lenovo>adb devices List of devices attached C9K7N15722004375 device 确定连接无误,否则执行we ...

  10. Linux 中多终端同步 history 记录

    很多文章都是第一时间在语雀进行了更新和发布,公众号的文章只是在语雀平台的基础上进行同步的,而且更新频率也会比语雀要慢.最近弃坑简书,入驻语雀,欢迎阅读原文来语雀一起交流学习. 基本认识 Linux 默 ...