鸭梨公共文档

主题

Tauri 技巧 ​

阻止页面 OverScroll 效果 ​

防止页面滚动触发原生过渡效果，可以添加全局样式：

css
html, body {
  overflow: hidden;
  position: fixed;
  width: 100vw;
  height: 100vh;
  overscroll-behavior: none;
}

对于 Edge 等桌面浏览器，左右滚动会触发前进后退动作。以上方案对此问题有效。

Android 滚动到容器边缘默认会产生阴影，在 Android 12+ 上，OverScroll 效果默认为弹性回弹。但 OverScroll 效果不适用于 WebView 页面，有时会影响页面显示效果。

可以通过修改 src-tauri/gen/android/app/src/main/res/layout/activity_main.xml 来禁用：

xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:overScrollMode="never"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>