移动设备上的固定 div 不固定

Question

我需要在屏幕底部固定一个操作栏。

以下CSS在桌面模式下运行良好：

        <div class="slds-p-around--large actions">
            <lightning-button-stateful
                    label-when-off="Check All"
                    label-when-on="Uncheck All"
                    label-when-hover="Uncheck All"
                    icon-name-when-off="utility:check"
                    icon-name-when-on="utility:close"
                    icon-name-when-hover="utility:close"
                    selected={selected}
                    onclick={handleMasterSelection}>
            </lightning-button-stateful>
            <button class="slds-button slds-button--success" onclick={handleApprove}>Approve</button>
            <button class="slds-button slds-button--destructive" onclick={showConfirmationModal}>Deny</button>
        </div>

.actions{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #F3F2F2;
    left: 0;
    display: block;
    height: 8vh;
    z-index: 10000;
}

但是在移动模式下它不起作用，div 不是固定的。我必须滚动到页面底部才能看到它。
对此有什么线索吗？

Answer 1

只需更改background-color: #000;并删除它应该可以工作left: 0;即可。

Answer 2

该问题是由 Salesforce 的移动应用程序 Web 容器引起的，其自定义滚动阻止position: fixed正常工作。

经过彻底调查，我发现问题是由 Salesforce 的移动应用程序 Web 容器引起的，该容器不使用本机窗口滚动，而是在向下滑动事件中使用 CSS (如 translate3d(翻译内容。

我不知道他们为什么这样做，因为它打破了立场：固定的 CSS 等。

我发现的解决方法如下：设置类似的东西

max-height : 90vh ; // Can be changed to suit the size you want your « fixed » element to have left
overflow-y : scroll ;

在页面内容上，滚动内容而不滚动页面本身。然后，您可以将要固定的内容放在内容的顶部或底部，这将模仿固定位置的行为。