JavaScript 滚动当前视图的元素 id答案

【问题标题】：JavaScript Scroll current view's element idJavaScript 滚动当前视图的元素 id
【发布时间】：2016-02-18 08:50:45
【问题描述】：

如果这个问题已经被问到/回答过，我们深表歉意。我有一个带有很多段落标签的 html 页面（这个页面有 JQuery 库）。每个段落 (p) 标记都与具有名称的锚标记相关联。请注意，这些段落中的内容可能会有所不同。当用户滚动页面时，如何获取当前视图中锚标签的名称？

<p><a name="para1"></a> some long text </p> 
<p><a name="para2"></a> some text </p> 
<p><a name="para3"></a> some long text </p>

【问题讨论】：

How to get on-screen visible element objects in jQuery?的可能重复
您可以在这里使用scrollIntoView 或scroll 事件。
@alireza safian，是的，它看起来像复制品。 Mohamed-Yousef 的回答是解决问题的不同方式。所以我会保留这个问题。

标签： javascript jquery html css

【解决方案1】：

你可以使用

$(document).ready(function(){
    $(window).on('scroll',function(){
        var Wscroll = $(this).scrollTop();
        $('a[name^="para"]').each(function(){
            var ThisOffset = $(this).closest('p').offset();
            if(Wscroll > ThisOffset.top &&  Wscroll < ThisOffset.top  + $(this).closest('p').outerHeight(true)){
                $(this).closest('p').css('background','red');
                console.log($(this).attr('id')); // will return undefined if this anchor not has an Id
                // to get parent <p> id
                console.log($(this).closest('p').attr('id')); // will return the parent <p> id
            }
        });
    });
});

Demo

注意：不要忘记包含 Jquery

解释：$(this) 在 .each() 内选择名称以 para .. 开头的锚点。closest('p') 选择此锚点的父 <p> .. 所以围绕这个来达到你想要的东西

【讨论】：

显然我拥有的是段落内的锚标签（
一些文本

）。我试图在这个问题上使用你的答案，但无法成形。你能解释一下吗
@JenonD 最后？ :) .. 很高兴它有帮助 .. 欢迎您，祝您好运 :)
是的...我实际上在空闲时间从事一个社区项目，这个 html 是使用 cef winforms 加载到 Windows 窗体中的，它正在工作:-)
@JenonD 干得好.. 社区项目需要大量时间和大量编码......我希望你能尽快完成它......如果你需要任何东西，我会在这里提供帮助。 . 祝你好运 :) ..

【解决方案2】：

如果有人对开箱即用的解决方案感兴趣，也请查看https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery。将它与 Mohamed-Yousef 的答案混合使用时效果很好。

添加 jquery 引用
添加 jquery.visible.js 引用

$(function(){
 $(window).on('scroll',function(){
  $('a[name^="para"]').each(function(){               
      var visible = $(this).visible( false );
      if(visible){
      console.log($(this).attr('name'));
      return false;
          }       
      });
  }); 
});

【讨论】：