Question

我在FF中的flexcontainer div有问题我怎么能解决这个问题？这是我的代码的例子

<div id="holder">
   <div id="content"></div>
</div>

和元素的css

#holder {
   border: 1px solid #eee;
   display: flex;
   flex-direction: column-reverse;
   justify-content: flex-start;
   overflow: auto;
}
#content div {
   height: 110px;
   border-top: 1px solid black
}

和js在这里动态地将div添加到内容

中

<script type="text/javascript">

    var C = document.getElementById('content');
    var H = document.getElementById('holder');
    var rowNum = 0;
    setInterval(function() {
    var row = document.createElement('div');
    row.innerHTML = 'Row #' + rowNum++;
    C.appendChild(row);
    }, 2000);

    H.addEventListener('scroll', function(e) {
    var bottomDiff = C.getBoundingClientRect().bottom - 
    H.getBoundingClientRect().bottom;

    var oldScrollTop = H.scrollTop;
    H.classList.toggle('manualScroll', bottomDiff > 0);
    if (bottomDiff > 0) {   H.scrollTop = oldScrollTop; }
    });
</script>

Answer 1

在检查您的代码后，我发现您应该将overflow:auto添加到#content而不是#holder

＆＃13;

var C = document.getElementById('content');
    var H = document.getElementById('holder');
    var rowNum = 0;
    setInterval(function() {
    var row = document.createElement('div');
    row.innerHTML = 'Row #' + rowNum++;
    C.appendChild(row);
    }, 2000);

    H.addEventListener('scroll', function(e) {
    var bottomDiff = C.getBoundingClientRect().bottom - 
    H.getBoundingClientRect().bottom;

    var oldScrollTop = H.scrollTop;
    H.classList.toggle('manualScroll', bottomDiff > 0);
    if (bottomDiff > 0) {   H.scrollTop = oldScrollTop; }
    });

＆＃13;

#holder {
   border: 1px solid #eee;
   display: flex;
   flex-direction: column-reverse;
   justify-content: flex-start;
   overflow: auto;
}
#content div {
   height: 110px;
   border-top: 1px solid black
}
#content {
overflow:auto
}

＆＃13;

<div id="holder">
   <div id="content"></div>
</div>

＆＃13;

带溢流卷轴的Flexcontainer

1 个答案: