純粋なCSSオーバーレイスクロール

bugfix> javascript > 投稿 2021-01-02 19:57

cssとhtmlのみを使用して、ページの残りの部分を下にスクロールする前に、内側のdiv（赤いdivをオーバーレイ）を完全にスクロールアウトすることは可能ですか？基本的に、後ろのdivをフリーズしながらオーバーレイスクロールがcssでのみ可能かどうか疑問に思っていますか？次に、赤いdivが消えたら、背景のスクロールを解除して続行します。ここのこのサイトに似ています：https://humaan.com/ 。それとも、何らかのJavaScriptを使用する必要がありますか？

.headervideo{background-color:blue; width:100%; height:900px;}
.headerbreak{width:100%; height:300px;}
.headervideo #inner-box {
  background-color: red;
  height: 90%;
  width: 100%;
}

<div class="headervideo">
  <div id="inner-box"></div>
</div>
<div class="headerbreak">
<div>

javascript

html

css

回答 2 件

position:sticky これを概算できます：

.headervideo {
  background: url(https://picsum.photos/id/1064/800/800) center/cover;
  height: 100vh;
  position: relative;
  z-index: 2;
}
.nextsection {
  background: url(https://picsum.photos/id/107/800/800) center/cover;
  height: 100vh;
  margin-top: -100vh;
  position: sticky;
  top: 0;
}
.container {
  height:200vh;
}
body {
  margin: 0;
}

<div class="container">
  <div class="headervideo"></div>
  <div class="nextsection"></div>
</div>
<div style="height:150vh"> more content later </div>

CSSを使用すると、ホバーイベントを使用して特定のスクロール位置（たとえば、赤いdivの直後）を検出できますが、これは携帯電話などのタッチのみのデバイスでは機能しません。また、カーソルが画面上のどこにでもある可能性があるため、信頼性が低くなります。

JavaScriptを使用してスクロール位置を検出する必要があります。ただし、JavaScriptを使用して、異なるスクロール位置にクラスを追加し、残りをCSSで実行することしかできませんでした。簡単な例を次に示します。

var red = document.querySelector('#inner-box');
var begin = red.scrollTop;
var end = begin + red.clientHeight;
console.log(begin)
document.body.classList.add('in');
window.addEventListener("scroll", (event) => {
  if(this.scrollY < begin) {
    document.body.classList.add('before');
    document.body.classList.remove('after');
    document.body.classList.remove('in');
  } else if(end < this.scrollY) {
    document.body.classList.remove('before');
    document.body.classList.add('after');
    document.body.classList.remove('in');
  } else {
    document.body.classList.remove('before');
    document.body.classList.remove('after');
    document.body.classList.add('in');
  };
});

.headervideo {
  background-color: blue;
  width: 100%;
  height: 900px;
}
.headerbreak {
  width: 100%;
  height: 300px;
}
.headervideo #inner-box {
  background-color: red;
  height: 90%;
  width: 100%;
}
body {
}
body.before {
  background-color: lightgreen;
}
body.in {
  background-color: lightpink;
}
body.after {
  background-color: lightblue;
}

<body>
  <div class="headervideo">
    <div id="inner-box"></div>
  </div>
  <div class="headerbreak">
    <div>
</body>

bugfix

純粋なCSSオーバーレイスクロール

javascript

html

css

関連記事