如何始终在屏幕底部显示浮动操作按钮

Question

我正在使用材料用户界面

我有一个浮动操作按钮，我想向它显示一个不会随滚动而改变的特定位置，

我也想知道这是否是一个好问题

这是代码

  const floatingMenuButtonStyle = {
    backgroundColor: '#DEEAF6',
    color: '#8A3473',
    alignSelf: 'flex-end',
    position: 'fixed',
    bottom: '8%',
    right: '9%'

这是浮动操作按钮

   <Fab 
        style={floatingMenuButtonStyle}
         aria-label="add"
          children={<AddIcon fontSize='default' />}></Fab>
      }

Answer 1

html 和 css 就可以很好地做到这一点。

您需要做的就是简单地将其放在一个<div>元素中position:fixed，然后将您的图标作为子元素position:absolute，然后它就会根据您的需要定位在右下角。

就像这个绿色盒子示例一样

<div style="
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap-reverse;
    flex-direction: row-reverse;">

    <div style="
        width:130px;
        height:130px;
        position: absolute;
        background-color:green;">
    </div>

</div>