uni-app iOS平台nvue页面web-view中不支持css的overscroll-behavior: none;

uni-app iOS平台nvue页面web-view中不支持css的overscroll-behavior: none;

示例代码：

body {  
  overscroll-behavior: none;  
}

操作步骤：

  • nvue页面web-view中加载的网页中使用以下CSS
body {  
  overscroll-behavior: none;  
}

预期结果：

  • 浏览器中不会产生回弹效果

实际结果：

  • app运行到iOS模拟器中，仍然有回弹效果

bug描述：

app运行到iOS模拟器中
nvue页面web-view中不支持css的overscroll-behavior: none;


| 信息类别     | 信息内容       |
|--------------|----------------|
| 产品分类     | uniapp/App     |
| PC开发环境   | Mac            |
| PC版本号     | 10.15.7        |
| HBuilderX    | 正式           |
| HBuilderX版本| 3.99           |
| 手机系统     | iOS            |
| 手机版本号   | iOS 14         |
| 手机厂商     | 模拟器         |
| 手机机型     | iphone12       |
| 页面类型     | nvue           |
| Vue版本      | vue3           |
| 打包方式     | 云端           |
| 项目创建方式 | HBuilderX      |

更多关于uni-app iOS平台nvue页面web-view中不支持css的overscroll-behavior: none;的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

iOS16才支持 https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

更多关于uni-app iOS平台nvue页面web-view中不支持css的overscroll-behavior: none;的实战教程也可以访问 https://www.itying.com/category-93-b0.html


哦，原来如此，谢谢大佬，那是不是iOS16里，用这个方法就可以禁用网页回弹了？

大佬，再帮忙看看这个evalJs报错的问题，谢谢 https://ask.dcloud.net.cn/question/184957

在 uni-app 的 nvue 页面中，web-view 组件用于嵌入网页内容。由于 nvue 是基于原生渲染的，因此它并不完全支持所有的 CSS 属性，尤其是一些较新的 CSS 属性。

overscroll-behavior 是一个较新的 CSS 属性，用于控制滚动到边界时的行为。然而，在 nvue 的 web-view 中，overscroll-behavior: none; 可能无法正常工作，因为 nvue 的 web-view 是基于原生组件实现的，而不是完全的浏览器环境。

解决方案

如果你希望在 nvue 的 web-view 中禁用过度滚动（overscroll）效果，可以尝试以下几种方法：

  1. 使用 scroll-view 组件：

    • 如果你不需要嵌入网页，而是只需要展示一些滚动内容，可以使用 scroll-view 组件，并设置 scroll-y 属性来控制垂直滚动。

  2. 使用 disableScroll 属性：

    • 在 web-view 组件中，可以尝试使用 disableScroll 属性来禁用滚动。虽然它不能完全等同于 overscroll-behavior: none;，但可以在一定程度上控制滚动行为。
    <web-view :src="url" :disableScroll="true"></web-view>

  3. 使用 JavaScript 控制滚动行为：

    • 在嵌入的网页中，你可以通过 JavaScript 来控制滚动行为，例如监听 touchmove 事件并阻止默认行为。
    document.addEventListener('touchmove', function(event) {
    event.preventDefault();
}, { passive: false });
回到顶部