1

Javascript の IntersectionObserver について学習しようとしています。

いくつかの記事とドキュメントを読んだ後、自分で試すために CodePen を作成することにしました: IntersectionObserver CodePen

トップメッセージに「見えるブロック」を表示させたい。CodePen は「ほぼ」機能しますが、完全には機能しません。正しいブロックが表示される場合と表示されない場合があります。

これが私のJSです：

let message = document.querySelector('#block-number');

// INTERSECTION OBSERVER STUFF
const io = new IntersectionObserver(entries => {
   if(entries[0].isIntersecting) {
    message.innerHTML = entries[0].target.textContent;
  }
}, {
    threshold: [.25]
});

// ELEMENTS TO OBSERVE
const blk1 = document.querySelector('#block1');
const blk2 = document.querySelector('#block2');
const blk3 = document.querySelector('#block3');
const blk4 = document.querySelector('#block4');
const blk5 = document.querySelector('#block5');
const blk6 = document.querySelector('#block6');

// START OBSERVING ELEMENTS
io.observe(blk1);
io.observe(blk2);
io.observe(blk3);
io.observe(blk4);
io.observe(blk5);
io.observe(blk6);

私が間違っていることについてのアイデアはありますか?

私も（運がなければ）次のようなことを試しました：

if(entries[0].intersectionRatio !== 0)

ありがとうございました！

4

2 に答える 2

0

しきい値を 25% に設定しました。

これの問題は、次のブロックがビューポートに 25% 入った後、前のブロックがビューポートの最後の 25% を離れることです。

これは、次の console.log で簡単に確認できました。

console.log(entries[0].target.textContent, ": ", entries[0].intersectionRatio)


let message = document.querySelector('#block-number');

// INTERSECTION OBSERVER STUFF
const io = new IntersectionObserver(entries => {
   if(entries[0].isIntersecting ) {
    console.log(entries[0].target.textContent, ": ", entries[0].intersectionRatio)
    message.innerHTML = entries[0].target.textContent;
  }
}, {
    threshold: [.25]
});

// ELEMENTS TO OBSERVE
const blk1 = document.querySelector('#block1');
const blk2 = document.querySelector('#block2');
const blk3 = document.querySelector('#block3');
const blk4 = document.querySelector('#block4');
const blk5 = document.querySelector('#block5');
const blk6 = document.querySelector('#block6');

// START OBSERVING ELEMENTS
io.observe(blk1);
io.observe(blk2);
io.observe(blk3);
io.observe(blk4);
io.observe(blk5);
io.observe(blk6);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: roboto;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  background-color: #eee;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.message {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background-color: #ef9b8d;
  color: white;
}

.blocks {
  padding-top: 100px;
}

.block {
  height: 85vh;
  width: 90vw;
  margin: 0 auto 15vh;
  background-color: #999;
  color: white;
}
<div class="message center">Displaying &nbsp;<span id="block-number">Block 1</span></div>
  
  <div class="blocks">
    <div id="block1" class="block center">Block 1</div>
    <div id="block2" class="block center">Block 2</div>
    <div id="block3" class="block center">Block 3</div>
    <div id="block4" class="block center">Block 4</div>
    <div id="block5" class="block center">Block 5</div>
    <div id="block6" class="block center">Block 6</div>
  </div>

これを修正するには、単純にしきい値を上げます。(現在のブロックと見なすためにビューポートに入力する必要があるブロックの量によって異なります)

デモ：

let message = document.querySelector('#block-number');

// INTERSECTION OBSERVER STUFF
const io = new IntersectionObserver(entries => {
   if(entries[0].isIntersecting ) {
    console.log(entries[0].target.textContent, ": ", entries[0].intersectionRatio)
    message.innerHTML = entries[0].target.textContent;
  }
}, {
    threshold: [.8] // raised the threshold
});

// ELEMENTS TO OBSERVE
const blk1 = document.querySelector('#block1');
const blk2 = document.querySelector('#block2');
const blk3 = document.querySelector('#block3');
const blk4 = document.querySelector('#block4');
const blk5 = document.querySelector('#block5');
const blk6 = document.querySelector('#block6');

// START OBSERVING ELEMENTS
io.observe(blk1);
io.observe(blk2);
io.observe(blk3);
io.observe(blk4);
io.observe(blk5);
io.observe(blk6);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: roboto;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  background-color: #eee;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.message {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background-color: #ef9b8d;
  color: white;
}

.blocks {
  padding-top: 100px;
}

.block {
  height: 85vh;
  width: 90vw;
  margin: 0 auto 15vh;
  background-color: #999;
  color: white;
}
<div class="message center">Displaying &nbsp;<span id="block-number">Block 1</span></div>
  
  <div class="blocks">
    <div id="block1" class="block center">Block 1</div>
    <div id="block2" class="block center">Block 2</div>
    <div id="block3" class="block center">Block 3</div>
    <div id="block4" class="block center">Block 4</div>
    <div id="block5" class="block center">Block 5</div>
    <div id="block6" class="block center">Block 6</div>
  </div>

于 2018-07-15T14:30:53.207 に答える