uni-app scroll-view 组件内 position: fixed; 定位相对于 scroll-view 而不是整个页面

uni-app scroll-view 组件内 position: fixed; 定位相对于 scroll-view 而不是整个页面

信息类别 详情
产品分类 uniapp/App
PC开发环境 Windows
操作系统版本 windows11
HBuilderX类型 正式
HBuilderX版本 3.3.12
手机系统 iOS
手机系统版本 iOS 12.3
手机厂商 苹果
手机机型 iPhoneXR
页面类型 vue
vue版本 vue2
打包方式 离线
项目创建方式 HBuilderX
App下载地址 https://apps.apple.com/cn/app/%E5%AE%89%E7%BB%9C%E6%88%98%E9%B9%B0/id1612225137

示例代码：

<template>
<view class="content">
<scroll-view scroll-y="true" >
<view class="content_box">
<button @click="Isright = !Isright" type="default">按钮</button>
<view v-if="Isright" class="right_box"> </view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
Isright:false
}
}
}
</script>
<style>
.content_box{width: 100%;height: 500rpx;}
.right_box{
position: fixed;
right: 0;top: 0;bottom: 0;
width: 200rpx;background-color: #007AFF;z-index: 9999;
}
.logo {margin: auto;height: 200rpx;width: 200rpx;}
</style>

操作步骤：

  • scroll-view使用弹窗

预期结果：

  • position: fixed; 元素占据全屏

实际结果：

  • 仅继承scroll-view的宽高，未占据全屏

bug描述：

  • scroll-view中使用fixed定位，还是相对于scroll-view

更多关于uni-app scroll-view 组件内 position: fixed; 定位相对于 scroll-view 而不是整个页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

参考这个问题的回答：https://ask.dcloud.net.cn/question/140124

更多关于uni-app scroll-view 组件内 position: fixed; 定位相对于 scroll-view 而不是整个页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢感谢！！！

在 uni-app 中使用 scroll-view 组件时，如果你在 scroll-view 内部使用了 position: fixed; 进行定位，你会发现 fixed 元素的定位是相对于 scroll-view 而不是整个页面。这是因为 scroll-view 本质上是一个可滚动的容器，它的内部元素会被限制在 scroll-view 的视口内。

解决方法

如果你希望 fixed 元素相对于整个页面而不是 scroll-view 进行定位，可以尝试以下几种方法：

1. 将 fixed 元素移到 scroll-view 外部

将需要 fixed 定位的元素放在 scroll-view 组件的外部，这样它就会相对于整个页面进行定位。

<template>
  <view>
    <!-- fixed 元素放在 scroll-view 外部 -->
    <view class="fixed-element">
      Fixed Element
    </view>

    <scroll-view scroll-y class="scroll-view">
      <view class="content">
        <!-- 内容 -->
      </view>
    </scroll-view>
  </view>
</template>

<style>
.fixed-element {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: red;
  z-index: 999;
}

.scroll-view {
  height: 100vh;
}

.content {
  height: 2000px; /* 足够高的内容以测试滚动 */
}
</style>

2. 使用 position: sticky;

如果你希望元素在 scroll-view 内部滚动到某个位置时固定，可以使用 position: sticky; 替代 position: fixed;。

<template>
  <scroll-view scroll-y class="scroll-view">
    <view class="sticky-element">
      Sticky Element
    </view>
    <view class="content">
      <!-- 内容 -->
    </view>
  </scroll-view>
</template>

<style>
.sticky-element {
  position: sticky;
  top: 0;
  background-color: red;
  z-index: 999;
}

.scroll-view {
  height: 100vh;
}

.content {
  height: 2000px; /* 足够高的内容以测试滚动 */
}
</style>

3. 使用 transform 模拟 fixed 效果

在某些情况下，你可以使用 transform 来模拟 fixed 的效果，但这种方法可能会比较复杂，且不适用于所有场景。

<template>
  <scroll-view scroll-y class="scroll-view">
    <view class="content">
      <!-- 内容 -->
    </view>
    <view class="fixed-element">
      Fixed Element
    </view>
  </scroll-view>
</template>

<style>
.fixed-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: red;
  z-index: 999;
  transform: translateY(var(--scroll-top, 0));
}

.scroll-view {
  height: 100vh;
}

.content {
  height: 2000px; /* 足够高的内容以测试滚动 */
}
</style>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
    };
  },
  methods: {
    onScroll(e) {
      this.scrollTop = e.detail.scrollTop;
      this.$nextTick(() => {
        const fixedElement = this.$refs.fixedElement;
        if (fixedElement) {
          fixedElement.style.setProperty('--scroll-top', `${this.scrollTop}px`);
        }
      });
    },
  },
};
</script>
回到顶部