Question

我有一个带有Youtube视频的Wordpress页面。当视频结束时，我想让它滚动到下一个div，同时没有问题。 HTML看起来像这样：

<div class="embed-container"><iframe  src="https://www.youtube.com/embed/xcC3UQl3V-U?&autohide=0&modestbranding=1&controls=2&rel=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe></div>

//somthing on html and in the next //

<div class="embed-container"><iframe id="playerxcC3UQl3V-U" src="https://www.youtube.com/embed/xcC3UQl3V-U?&autohide=0&modestbranding=1&controls=2&rel=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe></div>

.... and about 10 or 20 posts like this pro page

当我使用alert('done');尝试测试时，它运行正常，但我不希望它提醒一些事情。我想让它滚动到班级的下一个div。我从jQuery中发现了很多代码，但我无法让它工作。也许对某人来说这很容易，但我是Javascript世界的新手。这是我的Javascript：

function onPlayerStateChange(event) {
   if (event.data == YT.PlayerState.ENDED){

  }
}

Answer 1

首先弄清楚要滚动的元素的y位置，然后使用window.scrollTo：

  var y = document.getElementById('playerxcC3UQl3V').getBoundingClientRect().y 
    + window.scrollY
  window.scrollTo(0, y);

向下滚动到下一个YouTube视频

1 个答案: