如何使滚动箭头在顶部和底部消失？ JavaScript的

问题描述 投票：1回答：1

没有使用jQuery（因为我使用它找到了很多这个问题的答案，但是我试图不去，因为我仍然掌握着香草JS）我想让我的顶箭在我到达时消失当我在页面底部时，页面顶部和我的底部箭头消失。

我觉得我可以实现这一点，最初有顶部箭头可见：隐藏，然后通过创建一个功能，识别窗口已经超过某一点，它会出现在那一点（同样的事情到底部，我会假设）但我无法弄清楚如何将其转换为JavaScript。

CodePen：https://codepen.io/ItzaMi/pen/wRyxxO

<body>
<nav>
    <div id="nav-square">
        <h1>STATIC</h1>
        <ul>
            <li class="nav-list"><a href=#home>Home</a></li>
            <li class="nav-list"><a href=#contacts>Contacts</a></li>
            <li class="nav-list"><a href=#aboutus>About Us</a></li>
            <li class="nav-list"><a href=#moreaboutus>More About Us</a></li>
        </ul>    
    </div>
</nav>
<div id="info">
    <div id="main-content">
        <div id="home" class="section">
            <img src="img/arrow_reverse.png" class="arrow_top" onclick="scrollingtop()">
            <h1>Home</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, perferendis illum modi necessitatibus laborum distinctio dolorem quia inventore ullam omnis ex possimus, soluta repellendus! Iure voluptas laboriosam exercitationem beatae reprehenderit quaerat ex debitis quas autem doloremque, ea eligendi modi maxime magni dicta voluptatem rem eius tempora deleniti distinctio! Suscipit dignissimos voluptates temporibus eum adipisci recusandae ad tempora sint sequi quidem iste vel ipsam aperiam eligendi iusto assumenda reprehenderit distinctio quis, tempore accusantium possimus minima impedit. Odit consequuntur dolorum sit iure, assumenda atque ratione ipsam officiis quae consectetur eos fuga omnis molestiae! Fuga dolorem laboriosam nostrum dicta facere ullam aspernatur, atque, maiores eius hic labore asperiores molestiae? Eum illum iure quibusdam, non perspiciatis fuga tempora quis culpa provident consectetur odit ut ab, voluptatum, aliquam magnam! Corporis, deserunt molestias hic eligendi amet eos omnis asperiores facilis accusantium blanditiis minima magnam cupiditate pariatur? Cum recusandae nisi modi dolorem deleniti ab labore reprehenderit perspiciatis tenetur. Facilis nihil enim qui reiciendis alias soluta ratione repellendus possimus quaerat magni, omnis aperiam aliquam eum asperiores deserunt fugiat sunt, eius itaque dolores ad, modi repudiandae! Eum, modi facere animi similique fuga omnis. Illo architecto optio fuga repellendus doloremque eos, commodi soluta reiciendis accusantium unde, esse nemo voluptates veritatis?</p>
            <img src="img/circle-arrow-icon.png" class="arrow_bottom" onclick="scrollingbottom()">
        </div>
        <div id="contacts" class="section">
            <!-- <img src="img/arrow_reverse.png" class="arrow" onclick="scrollingtop()"> -->
            <h1>Contacts</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, perferendis illum modi necessitatibus laborum distinctio dolorem quia inventore ullam omnis ex possimus, soluta repellendus! Iure voluptas laboriosam exercitationem beatae reprehenderit quaerat ex debitis quas autem doloremque, ea eligendi modi maxime magni dicta voluptatem rem eius tempora deleniti distinctio! Suscipit dignissimos voluptates temporibus eum adipisci recusandae ad tempora sint sequi quidem iste vel ipsam aperiam eligendi iusto assumenda reprehenderit distinctio quis, tempore accusantium possimus minima impedit. Odit consequuntur dolorum sit iure, assumenda atque ratione ipsam officiis quae consectetur eos fuga omnis molestiae! Fuga dolorem laboriosam nostrum dicta facere ullam aspernatur, atque, maiores eius hic labore asperiores molestiae? Eum illum iure quibusdam, non perspiciatis fuga tempora quis culpa provident consectetur odit ut ab, voluptatum, aliquam magnam! Corporis, deserunt molestias hic eligendi amet eos omnis asperiores facilis accusantium blanditiis minima magnam cupiditate pariatur? Cum recusandae nisi modi dolorem deleniti ab labore reprehenderit perspiciatis tenetur. Facilis nihil enim qui reiciendis alias soluta ratione repellendus possimus quaerat magni, omnis aperiam aliquam eum asperiores deserunt fugiat sunt, eius itaque dolores ad, modi repudiandae! Eum, modi facere animi similique fuga omnis. Illo architecto optio fuga repellendus doloremque eos, commodi soluta reiciendis accusantium unde, esse nemo voluptates veritatis?</p>
            <!-- <img src="img/circle-arrow-icon.png" class="arrow" onclick="scrollingbottom()"> -->
        </div>
        <div id="aboutus" class="section">
            <!-- <img src="img/arrow_reverse.png" class="arrow" onclick="scrollingtop()"> -->
            <h1 >About Us</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, perferendis illum modi necessitatibus laborum distinctio dolorem quia inventore ullam omnis ex possimus, soluta repellendus! Iure voluptas laboriosam exercitationem beatae reprehenderit quaerat ex debitis quas autem doloremque, ea eligendi modi maxime magni dicta voluptatem rem eius tempora deleniti distinctio! Suscipit dignissimos voluptates temporibus eum adipisci recusandae ad tempora sint sequi quidem iste vel ipsam aperiam eligendi iusto assumenda reprehenderit distinctio quis, tempore accusantium possimus minima impedit. Odit consequuntur dolorum sit iure, assumenda atque ratione ipsam officiis quae consectetur eos fuga omnis molestiae! Fuga dolorem laboriosam nostrum dicta facere ullam aspernatur, atque, maiores eius hic labore asperiores molestiae? Eum illum iure quibusdam, non perspiciatis fuga tempora quis culpa provident consectetur odit ut ab, voluptatum, aliquam magnam! Corporis, deserunt molestias hic eligendi amet eos omnis asperiores facilis accusantium blanditiis minima magnam cupiditate pariatur? Cum recusandae nisi modi dolorem deleniti ab labore reprehenderit perspiciatis tenetur. Facilis nihil enim qui reiciendis alias soluta ratione repellendus possimus quaerat magni, omnis aperiam aliquam eum asperiores deserunt fugiat sunt, eius itaque dolores ad, modi repudiandae! Eum, modi facere animi similique fuga omnis. Illo architecto optio fuga repellendus doloremque eos, commodi soluta reiciendis accusantium unde, esse nemo voluptates veritatis?</p>
            <!-- <img src="img/circle-arrow-icon.png" class="arrow" onclick="scrollingbottom()"> -->
        </div>
        <div id="moreaboutus" class="section">
            <!-- <img src="img/arrow_reverse.png" class="arrow" onclick="scrollingtop()"> -->
            <h1>More About Us</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, perferendis illum modi necessitatibus laborum distinctio dolorem quia inventore ullam omnis ex possimus, soluta repellendus! Iure voluptas laboriosam exercitationem beatae reprehenderit quaerat ex debitis quas autem doloremque, ea eligendi modi maxime magni dicta voluptatem rem eius tempora deleniti distinctio! Suscipit dignissimos voluptates temporibus eum adipisci recusandae ad tempora sint sequi quidem iste vel ipsam aperiam eligendi iusto assumenda reprehenderit distinctio quis, tempore accusantium possimus minima impedit. Odit consequuntur dolorum sit iure, assumenda atque ratione ipsam officiis quae consectetur eos fuga omnis molestiae! Fuga dolorem laboriosam nostrum dicta facere ullam aspernatur, atque, maiores eius hic labore asperiores molestiae? Eum illum iure quibusdam, non perspiciatis fuga tempora quis culpa provident consectetur odit ut ab, voluptatum, aliquam magnam! Corporis, deserunt molestias hic eligendi amet eos omnis asperiores facilis accusantium blanditiis minima magnam cupiditate pariatur? Cum recusandae nisi modi dolorem deleniti ab labore reprehenderit perspiciatis tenetur. Facilis nihil enim qui reiciendis alias soluta ratione repellendus possimus quaerat magni, omnis aperiam aliquam eum asperiores deserunt fugiat sunt, eius itaque dolores ad, modi repudiandae! Eum, modi facere animi similique fuga omnis. Illo architecto optio fuga repellendus doloremque eos, commodi soluta reiciendis accusantium unde, esse nemo voluptates veritatis?</p>
        </div>
    </div>
</div>

CSS：

html {
scroll-behavior: smooth;
}

body {
height: 100vh;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}

/* Nav Bar */

nav {
grid-column: 1;
background-color: #ffffff;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 3fr 1fr;
position: fixed;
width: 50vw;
}

#nav-square {
grid-column: 2;
grid-row: 2;
background-color: #c9c9c9;
padding: 0 50px 0 50px;
margin: 0;
}

#nav-square h1 {
margin: 0;
padding: 0;
text-align: center;
font-size: 100px;
color: #17526d;
 }

#nav-square ul {
list-style-type: none;
margin: 0;
vertical-align: middle;
line-height: 50px;
padding: 20px 0 50px 0;
}

.nav-list {
font-size: 2em;
padding: 1em;
text-align: center;
}

.nav-list a {
display: block;
text-decoration: none;
color: black;
}

/* Content */

#info {
background-color: #ffffff;
display: flex;
margin: auto;
width: 45vw;
height: 100vh;
float: right;
margin-right: 5%;
position: relative;
}

#main-content {
align-items: center;
text-align: center;
line-height: 40px;
height: 100vh;
}

#main-content p {
font-size: 20px;
}

.section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}

.arrow_top {
width: 5%;
position: fixed;
top: 0;
/* visibility: hidden; */
}

.arrow_bottom {
width: 5%;
position: fixed;
bottom: 0;
}

JavaScript的：

function scrollingbottom() {
window.scrollBy(0, 1000);
}

function scrollingtop() {
window.scrollBy(0, -1000);
}
javascript html css scroll position
1个回答
1
投票

您可以收听滚动事件。可以使用读取滚动距离

window.scrollY

要么

pageYOffset

然后像你已经考虑的那样设置箭头的可见性。

在示例中，我使用display属性。

为此：检查，如果window.scrollY和pageYOffset支持所有浏览器。然后将其调整到您的代码并优化隐藏底部箭头的点。

document.addEventListener('scroll', () => {

  const fromTop = window.scrollY || pageYOffset;
  const fromBottom = document.getElementById('main').getBoundingClientRect().height-fromTop;
  const upArrow = document.getElementById('upArrow');
  const downArrow = document.getElementById('downArrow');

  if (fromTop > 10) {
    upArrow.style.display = 'block';
  } else {
    upArrow.style.display = 'none';
  }

  if (fromBottom > fromTop) {
    downArrow.style.display = 'block';
  } else {
    downArrow.style.display = 'none';
  }

});
#main {
  margin: 20px auto 20px auto;
}
#upArrow {
  position: fixed;
  top: 2px;
  margin-left: 48%;
  display: none;
}
#downArrow {
  position: fixed;
  bottom: 2px;
  margin-left:48%;
}
<div id="main">
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
<div id="endOfPage"></div>
</div>
<div id="upArrow"><a href="#top">&uArr;</a></div>
<div id="downArrow"><a href="#endOfPage">&dArr;</a></div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.