具有扩展组件的动态滚动区域

Dynamic scroll area with expanding components

本文关键字：动态 滚动 区域 组件 扩展      更新时间：2023-09-26

我有一个页面，在一个容器div内有三个div：

____________________
|------------------|
||   Expandable   ||
||                ||
|------------------|
|------------------|
||   scroll area  ||
||                ||
|------------------|
|------------------|
||    fixed       ||
||----------------||
|__________________|

我遇到的问题是，当顶部div 被扩展(通过 javascript 组件(时，滚动区域被向下推，在容器div 之外，而我需要它来动态收缩。(固定div 当前处于绝对位置，滚动div 向下推到其下方(

它也不能使用固定高度(例如像素(，因为它需要动态调整以适应许多不同的屏幕尺寸。

问题视频：https://youtu.be/M-isVl1hs8Q

.css：

.scrollcontainer{
 position:relative;
 width:100%;
 height:100%;
}
.floor{
  width:100%;
  height:100% - 60px;
  display:flex;
  flex-direction:column;
}
.item{
  flex:1 1 auto;
}
.broom{
  transition:1s linear all;
}
.dirt{
  transition:1s linear all;
}
.rug{
  display:block;
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;
}

javaqscript/html：

        <div className="scrollcontainer">
            <div className="floor">
                <div className="broom item">
                    <FoodItemList
                        foodItemList={[this.props.foodItem]}
                        user={this.props.user}
                    />
                </div>
                <div className="dirt item">
                    <Scrollbars
                        autoHeight
                    >
                    <Comments comments={this.props.foodItem.comments} />
                </Scrollbars>
                </div>
            </div>
            <div className="rug">
                <Paper style={styles.paper} zDepth={0}>
                    <div className="leftcolumn">
                        <TextField
                            style={{color: 'white'}}
                            hintText="You can leave a comment here"
                            onChange={this.handleComment}
                            value={this.state.commentText}
                        />
                    </div>
                    <div className="rightcolumn">
                        <IconButton
                            iconStyle={styles.smallIcon}
                            style={styles.small}
                            onTouchTap={this.addComment}
                        >
                        <ContentSend color={lightGreenA200} />
                        </IconButton>
                    </div>
                </Paper>
            </div>
        </div>

谢谢！

很高兴看到一个不起作用的例子。我认为最好让那些回答的人来决定他们的分析中哪些是有帮助的，哪些是省略的，而不是你自己。

这是我制作的一个快速代码笔，用于向您展示元素之间的交互性。它使用一个flexbox进行空间/大小协商，一个absolute position的元素，以及一个"checkbox hack"来模拟javascript组件。加入您想要的overflow设置(不确定scroll或任何爵士乐的方向，或者您是否想要wrapper(，这将照顾布局。

以下是相关的flexbox代码：

我抛出了一些名字来可视化每个对应物，以帮助传达示例的含义。

从某种意义上说，你有点像在地毯下面扫一些泥土！

.floor{
  width:100%;
  height:100%;
  border:1px solid red;
  display:flex;
  flex-direction:column;
}
.item{
  box-shadow: inset 0 0 16px -4px red;
  flex:1 1 auto;
}

以及该 css 的相关标记：

<div class="container">
  <div class="floor">
    <div class="broom item">
    </div>
    <div class="dirt item">
    </div>
  </div>
  <div class="rug">
  </div>
</div>

不要忘记检查浏览器支持以了解此处使用的内容！

http://codepen.io/anon/pen/ZBOwdw?editors=1100

相关文章：