Skip to content

Instantly share code, notes, and snippets.

@uruly
Created July 14, 2018 13:19
Show Gist options
  • Save uruly/e1bcf3348e1458c301c67b602e9023fa to your computer and use it in GitHub Desktop.
Save uruly/e1bcf3348e1458c301c67b602e9023fa to your computer and use it in GitHub Desktop.
Stop Scroll - Pure JavaScript
<!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>
/**
* 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;
}
@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