uniapp 去除页面滚动和果冻效果

最新推荐文章于 2024-03-24 17:45:36 发布

Raite31

最新推荐文章于 2024-03-24 17:45:36 发布

阅读量566

点赞数 1

分类专栏：一周总结小程序前端文章标签：前端微信小程序

本文链接：https://blog.csdn.net/weixin_44696269/article/details/132267673

版权

一周总结同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

小程序

6 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

<template>
  <view class="page">
    <!-- 页面内容 -->
  </view>
</template>
<style>
.page {
  overflow: hidden;
  overscroll-behavior: none;
}
</style>

// 在上面的示例中，overflow: hidden;将隐藏页面的滚动条，并禁止滚动。overscroll-behavior: none;则会去除果冻效应，即在页面边缘滚动时不会出现弹性效果。
// 请注意，overscroll-behavior属性可能不被所有浏览器完全支持，如果需要兼容性更好的解决方案，可以使用JavaScript来禁止页面滚动并去除果冻效应。以下是一个示例：

<template>
  <view class="page">
    <!-- 页面内容 -->
  </view>
</template>
<script>
export default {
  mounted() {
    document.body.style.overflow = 'hidden';
    document.body.style.overscrollBehavior = 'none';
  },
  beforeDestroy() {
    document.body.style.overflow = '';
    document.body.style.overscrollBehavior = '';
  },
};
</script>