我正在尝试创建一个在单击时向下滚动100vh(一个窗口高度)的按钮。我将其固定为30vh的宽度,滚动部分为右侧的70%。我想知道为什么当我使用window.scrollBy
时我的代码什么都不做?
HTML:
<Content>
<Intro />
<TypewriterSpace>
<Typewriter />
<Button onClick={this.handleClick}>View my work</Button>
</TypewriterSpace>
</Content>
CSS:
let TypewriterSpace = styled.div`
margin-left: 6rem;
margin-right: 20rem;
margin-top: -1rem;
position: relative;
`
let Content = styled.div`
height: 100vh;
width: 70vw;
display: flex;
flex-direction: column;
float: right;
overflow: auto;
`
const Button = styled.button`
font-family: "Avenir";
height: 3em;
width: 10em;
color: white;
border: 2px solid white;
background: #1d1d20;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
position: absolute;
transition: 0.5s;
margin-top: 4em;
left: 35%;
margin-top: 60vh;
&:hover{
color: #1d1d20;
border: 2px #1d1d20;
background: white;
}
`;
我的handeClick功能:
handleClick(e) {
let pageHeight = window.innerHeight;
window.scrollBy(0, pageHeight);
}
注意,您将div高度保持为100vh,并且也要滚动相同的高度!由于div高度是100vh,等于浏览器屏幕的高度,因此不会有滚动范围,因此,关键是您试图在div中滚动,该div除了屏幕高度外没有其他内容...
如果您想尝试,可以通过设置内容的height: 110vh;
然后滚动window.innerHeight
来尝试,其中将滚动一些内容,以便滚动!
我希望这会对您有所帮助!
谢谢!继续编码!