Created
July 14, 2018 13:19
-
-
Save uruly/e1bcf3348e1458c301c67b602e9023fa to your computer and use it in GitHub Desktop.
Stop Scroll - Pure JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Page Title</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" type="text/css" href="style.css" /> | |
| </head> | |
| <body> | |
| <div class="content"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content stop"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content stop"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content stop"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content stop"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <div class="content"> | |
| <p>ほげほげ</p> | |
| </div> | |
| <!-- 読み込む --> | |
| <script src="stop-scroll.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Scroll | |
| */ | |
| window.onscroll = scrollWindow; | |
| /** | |
| * スクロールされている間呼ばれる | |
| */ | |
| function scrollWindow() { | |
| // 条件 | |
| var items = document.querySelectorAll('.stop'); | |
| items.forEach( function(item){ | |
| var backgroundColor = item.style.backgroundColor; | |
| if ( isItemInScreen(item) && !(backgroundColor == 'rgb(37, 37, 37)') ){ | |
| item.style.backgroundColor = 'rgb(37, 37, 37)'; | |
| console.log("とおる"); | |
| stopScroll(); | |
| } | |
| }); | |
| } | |
| /** | |
| * スクロールを止める | |
| */ | |
| function stopScroll() { | |
| // 現在のスクロール量 | |
| var scrollOffsetY = window.pageYOffset; | |
| window.scrollTo(0,scrollOffsetY); | |
| } | |
| /** | |
| * 要素が指定した範囲にあるかどうか | |
| * @param {Element} item | |
| * @return {Booelan} | |
| */ | |
| function isItemInScreen( item ) { | |
| var screenHeight = window.innerHeight; | |
| var itemBottomY = item.getBoundingClientRect().bottom; | |
| var boundary = screenHeight / 2; // 上からスクロールしてくるとここで止まる 画面topからどれだけか | |
| if ( 0 <= itemBottomY && itemBottomY <= boundary ) { | |
| return true; | |
| } | |
| return false; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "UTF-8"; | |
| body { | |
| margin: 0; | |
| } | |
| .content { | |
| width: 90%; | |
| height: 80px; | |
| margin: 20px auto; | |
| background-color: #23e2f3; | |
| } | |
| .stop { | |
| background-color: #088029; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment