如何使列表的第一项始终位于顶部，而列表的其余部分将独立于它滚动

Question

是否可以将列表的第一项定位到列表的顶部并且不与其他项一起滚动？     <Select            open={open}            value={value}            onChange={this.handleSelectChange}            onClose={this.handleSelectClose}            onOpen={this.handleSelectOpen}          >            <MenuItem              style={{                backgroundColor: "transparent"              }}            >              <TextField                value={search}                fullWidth                placeholder="search"                onChange={this.handleInputChange}              />            </MenuItem>            {filteredOptions.length ? (              filteredOptions.map(option => {                return (                  <MenuItem value={option} key={option.value}>                    {option.label}                  </MenuItem>                );              })            ) : (              <MenuItem disabled>No match</MenuItem>            )}     </Select>它看起来像https://sharlaan.github.io/example3上的自动完成

Answer 1

链接不起作用，我没有看到你的例子。但是，这是在这种情况下您需要的样式示例：

Select

position: relative // necessary

height: 123px // optional

overflow-y: scroll // optional

MenuItem // first one only

position: absolute // necessary

top: 0px // optional

z-index:10 // optional

background-color: white // optional