如何解决StyledComponents溢出:滚动不适用于iOS Safari
我有一个可滚动的组件。它可以在ios Safari以外的所有设备上运行。在Safari上,它压缩所有内容以使组件具有零溢出。
这
我尝试过-webkit-overflow-scrolling: touch;
,但这没什么区别。
如果我设置了最小高度,则会将其设置为该高度,但无法滚动
<MenuBody height={height}>
<SwappingText>I am swapping</SwappingText>
<SwappingWrapper>
<StyledSelect value={swapFromToken} onChange={handleSwapFromChange}>
<option disabled selected>
Select
</option>
</StyledSelect>
<SwappingForText>for</SwappingForText>
<StyledSelect value={swapToToken} onChange={handleSwapForChange}>
<option disabled selected>
Select
</option>
</StyledSelect>
</SwappingWrapper>
<SwapInputsWrapper>
<InputWrapper>
<TopWrapper>
<InputLabelText>From</InputLabelText>
{swapFromToken && (
<TokenBalance onClick={populateFromInput}>
Available: {showTokenBalance('from')} {swapFromToken}
</TokenBalance>
)}
</TopWrapper>
<FakeInput>
{getImage('from')}
<SwapInput
type="number"
placeholder={'0'}
value={swapFromValue}
onChange={handleFromValueChange}
/>
</FakeInput>
</InputWrapper>
<ArrowImageWrapper>
<ArrowsImage src={arrows} alt="Arrows" onClick={swapTokens} />
</ArrowImageWrapper>
<InputWrapper>
<TopWrapper>
<InputLabelText>To</InputLabelText>
</TopWrapper>
<FakeInput>
{getImage('to')}
<SwapInput
type="number"
placeholder={'0'}
value={swapToValue}
onChange={handleToValueChange}
/>
</FakeInput>
</InputWrapper>
</SwapInputsWrapper>
{showModalVariations()}
<PrivateSwapWrapper>
<SwitchText>Make this swap private?</SwitchText>
<Switch
onChange={() => {
setIsPrivateVisible(!isPrivateVisible);
}}
classes={{
root: classes.root,switchBase: classes.switchBase,checked: classes.checked,track: classes.track,thumb: classes.thumb,}}
/>
</PrivateSwapWrapper>
{isPrivateVisible && (
<WalletInputWrapper>
<WalletInputLabel>Wallet Address</WalletInputLabel>
<WalletInput
placeholder={'What address can claim this swap'}
onChange={handlePrivateAddress}
/>
</WalletInputWrapper>
)}
</MenuBody>
```
```const MenuBody = styled.div`
width: 100vw;
padding-top: 20px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
border-top: 1px solid #e8ebec;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f1f8fc;
${(props: ComponentTypes) => {
const tall = props.height - 80;
return css`
height: ${tall}px;
`;
}}
const MenuBody = styled.div`
width: 100vw;
padding-top: 20px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
/* background-color: blue; */
border-top: 1px solid #e8ebec;
display: flex;
flex-direction: column;
align-items: center;
/* background-color: #f1f8fc; */
${(props: ComponentTypes) => {
const tall = props.height - 80;
return css`
height: ${tall}px;
`;
}}
`;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。