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. 微信小程序隐藏页面滚动条

    开发小程序时,经常会碰到页面长度超过屏幕高度,然后下拉时会出现滚动条,对于一些有强迫症的人来说是不可忍受的. 网上看了好多,写的.都评论有起作用或者不起作用的. 我在这分享一个全局隐藏滚动条的方式. ...

  2. vite项目优化----- 解决终端optimized dependencies changed. reloading问题

    写在前面网上都说vite要比webpack快,但个人感受,默认情况下, vite项目的启动确实比webpack快,但如果某个界面是首次进入,且依赖比较多/比较复杂的话,那就会比较慢了. 这篇文章就是用 ...

  3. python-pygal

    准备写大作业的时候发现了一个绝绝子的python库. 原文:https://blog.damavis.com/en/creating-vector-graphics-with-python/ 官网:h ...

  4. 快速上手Linux核心命令(三):文件和目录操作命令

    @ 目录 前言 cd 切换目录 pwd 显示当前路径 ls 显示目录下内容及相关属性信息 mkdir 创建目录 tree 以树形结构显示目录下的内容 touch 创建空白文件或改变文件的时间戳属性 c ...

  5. RTCP常见报文格式(申请I帧/RR/SR/SDES)

    本篇文章是基于对RTCP基本协议有所了解情况下,进行说明,因为RTCP在丢包重传(ARQ)方面需要使用 到,具体可以查看RTCP相关rfc文档或者博客.所以本篇文章主要是从抓包报文角度来看RTCP协议 ...

  6. 苦苦搞了半个通宵才搞定的直接使用Sliverlight将文件PUT到阿里云OSS

    为了公司的项目,小的我各种折腾啊,不过高兴的是实现了Silverlight直接提交至阿里云OSS的文件上传,文件上传再也不用通过服务器中转了. 研究SDK发现还有个Node-oss.js,但还没进行测 ...

  7. 收藏!最全Linux思维导图

    收藏!最全Linux思维导图 目录 收藏!最全Linux思维导图 1. 认识 Linux 2. Linux 命令 3. Linux学习路径 4. Linux 桌面介绍 5. FHS:文件系统目录标准 ...

  8. Syncthing 忽略模式

    忽略模式 概要 .stignore 描述 这是 Syncthing 同步文件夹的忽略模式语法指南 语法 .stignore 文件可包含一系列路径匹配模式,对指定文件的处理方式由第一个匹配到它的模式决定 ...

  9. 2022-11-26:给定一个字符串s,只含有0~9这些字符 你可以使用来自s中的数字,目的是拼出一个最大的回文数 使用数字的个数,不能超过s里含有的个数 比如 : 39878,能拼出的最大回文数是

    2022-11-26:给定一个字符串s,只含有0~9这些字符 你可以使用来自s中的数字,目的是拼出一个最大的回文数 使用数字的个数,不能超过s里含有的个数 比如 : 39878,能拼出的最大回文数是 ...

  10. elementui中的el-table,(prop对应多个属性)中拼接两个列表字段并展示

    elementui中的el-table,(prop对应多个属性)中拼接两个列表字段并展示 <el-table-column prop="pa_dt_name,pa_duty_name& ...