Question

我正在使用react JS设计一个页面，如果它们要从屏幕上滚动，我需要一些元素贴在顶部。我一直在使用position:fixed这样做，它在桌面chrome，safari和firefox上完美运行。但是，当我在移动safari上测试它时，固定元素继续与页面的其余部分一起滚动。我一直在做一些阅读，看起来对position:fixed的支持在移动设备上充其量只是参差不齐。有没有人有任何建议？

我的粘性元素的渲染功能如下所示。 this.props.fixed是一个布尔值，表示元素是否应该粘贴到屏幕顶部this.props.boxSize是在此之前卡住的元素占用的像素数（以便多个粘性元素）不重叠）。我确信这两个值都是正确的。

render: function(){
        var divStyle = {};
        var className = this.props.className + ' sticky';
        if(this.props.fixed){
            divStyle = {
                position: 'fixed',
                top: this.props.boxSize + 'px',
                background: '#ffffff',
                width: '100%',
                zIndex: 999999,
            };
            className = className + " fixed";
        }

        return(
            <div style={divStyle} className={className}>
                {this.props.children}
            </div>
            );
    }

我还尝试了position:absolute而不是position:fixed并得到了相同的结果（适用于桌面，在移动设备上滚动内容）。

真正棘手的部分是所有这一切都发生在表格单元格内部。我认为这就是导致问题的原因，但摆脱桌面小区不是一种选择。父元素的较少文件如下所示：

.scrollable {
  height: 100%;
  width: 100%;
  border-collapse: collapse;

  & > tbody > tr > td {
    padding: 0;
  }

  & > tbody > .content > td {
    height: 100%;
    position: relative;
  }

  & > tbody > .content > td > div {
    height: 100%;
    width: 100%;
    padding: 1px 0;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: inline-block;
    left: 0%;
    top: 0;
  }
}

我正在尝试创建固定元素的内容生活在该tbody内部

在移动设备上固定浮动元素

0 个答案: