代码之家 › 专栏 › 技术社区 › Ralf de Kleine

带隐藏溢出(带范围)的flex布局中的绝对定位按钮[重复]

absolute scrollbar flexbox css html

Ralf de Kleine · 技术社区 · 6 年前

这个问题已经有了答案:

position absolute but relative to parent 4答

我正在尝试实现一个带有隐藏滚动条的 flex layout 但现在我还需要一个绝对/固定的按钮,我无法让它工作。

如果没有隐藏的滚动条,它可以工作:


   
    
     但当我隐藏滚动条时,按钮会停留在顶部,这是不可取的。
     
      
     
    
    <style>
根{
背景色:fff;
显示:Flex;
身高:100%;
}

窗格{
弯曲生长:1;
柔性收缩:1;
显示:Flex;
溢出-X:隐藏;
溢出-Y:可见;
-MS溢出样式:无;
身高:100%;
宽度:400 px;
}

.pane::-webkit滚动条{
显示:无
}

Po.{
位置:绝对;
右:0px;
宽度:32 px;
高度:32 px;
背景色:01689B;
颜色:γFFF;
}
&风格/风格;
<div class=“root”>
<div class=“pane”>
<DIV class=“pos”>x</DIV>
<div style=“height:2000px”>
Lorem ipsum dolor sit amet等
<br/>lorem ipsum dolor sit amet等
<br/>lorem ipsum dolor sit amet等
<br/>lorem ipsum dolor sit amet等
<br/>按钮应停留在文本的右侧,并滚动文本的宽度;
和;
和;
和;
< /代码> <

4答




我想知道Flex-layout带着隐藏的滚动条。但现在我也需要一个绝对的/固定的按钮,我没能让它工作。

如果没有隐藏的滚动条,它可以工作:


但当我隐藏滚动条时,按钮会停留在顶部,这是不可取的。


<style>
    .root {
        background-color: #fff;
        display: flex;
        height:100%;
    }

    .pane {
        flex-grow: 1;
        flex-shrink: 1;
        display: flex;
        overflow-x: hidden;
        overflow-y: visible;
        -ms-overflow-style: none;
        height: 100%;
        width: 400px;
    }

    .pane::-webkit-scrollbar {
        display: none
    }

    div.pos {
        position: absolute;
        right: 0px;
        width: 32px;
        height: 32px;
        background-color: #01689B;
        color: #fff;
    }
</style>
<div class="root">
    <div class="pane">
        <div class="pos">x</div>
        <div style="height: 2000px">
            Lorem ipsum dolor sit amet, etc etc
            <br/> Lorem ipsum dolor sit amet, etc etc
            <br/> Lorem ipsum dolor sit amet, etc etc
            <br/> Lorem ipsum dolor sit amet, etc etc
            <br/> The button should stick to the right of the text and scroll width the text;
        </div>
    </div>
</div>

1 回复 | 直到 6 年前

Asons Oliver Joseph Ash 6 年前

问题很简单,绝对定位元素与滚动元素无关。

给它 position: relative 它会的。

堆栈片段

<style>
        html, body {
            overflow: hidden;
            height: 100%;
        }
        .root {
            background-color: #fff;
            display: flex;
            height: 100%;
        }
    
        .pane {
            position: relative;           /*  added  */
            flex-grow: 1;
            flex-shrink: 1;
            display: flex;
            overflow-x: hidden;
            overflow-y: visible;
            -ms-overflow-style: none;
            height: 100%;
        }
    
        .pane::-webkit-scrollbar {
            display: none
        }
    
        div.pos {
            position: absolute;
            right: 0px;
            width: 32px;
            height: 32px;
            background-color: #01689B;
            color: #fff;
        }
    </style>
    <div class="root">
        <div class="pane">
            <div class="pos">x</div>
            <div style="height: 2000px">
                Lorem ipsum dolor sit amet, etc etc
            </div>
        </div>
    </div>