uni-app宽屏下左窗体fixed定位滚动条受主窗体影响

uni-app宽屏下左窗体fixed定位滚动条受主窗体影响

开发环境 版本号 项目创建方式
Windows 7 3.1.2 HBuilderX

左窗体fixed,且不超出屏高

.left {  
    left: var(--window-margin);  
    right: calc(100vw - var(--window-left));  
}

主窗体没有滚动条的时候没问题,但是有滚动条的时候,左窗体右侧就会多出一个滚动条的空白,因不够屏高不显示,只是挤走左窗体, var(--window-left)包括了左边滚动条的宽度,单独设置::-webkit-scrollbar隐藏没用

示例代码：

<view class="fixed left">  
#code...  
<view>

<style lang="scss" scoped>  
.left {  
    left: var(--window-margin);  
    right: calc(100vw - var(--window-left));  
  }  
</style>

更多关于uni-app宽屏下左窗体fixed定位滚动条受主窗体影响的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app宽屏下左窗体fixed定位滚动条受主窗体影响的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的宽屏适配中滚动条导致的布局偏移问题。当主窗体出现滚动条时，100vw包含了滚动条的宽度，而var(--window-left)也包含了滚动条区域，导致计算偏差。

解决方案：

  1. 使用CSS自定义属性修正：
.left {
    left: var(--window-margin);
    right: calc(100vw - var(--window-left) - var(--window-scrollbar-width, 0px));
}
  1. JavaScript动态计算：
onLoad() {
    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
    this.scrollbarWidth = scrollbarWidth;
}
  1. CSS滚动条隐藏方案：
/* 全局隐藏滚动条但保留滚动功能 */
::-webkit-scrollbar {
    display: none;
}
/* 兼容Firefox */
html {
    scrollbar-width: none;
}
  1. 推荐使用flex布局替代fixed：
.container {
    display: flex;
    height: 100vh;
}
.left {
    width: var(--window-left);
    flex-shrink: 0;
}
.main {
    flex: 1;
    overflow: auto;
}
回到顶部