相关疑难解决方法(0)

在 angular 中，如何检测某个元素是否在视图中？

例如，我有以下内容：

<div class="test">Test</div>

有没有办法检测这个 div 何时出现？

谢谢。

我在 OS X 上使用 Selenium WebDriver 和 Chrome 驱动程序，在 Python 中实现。

我正在尝试编写一个测试来验证各种 HTML 元素是否完全在屏幕上（例如，我有一个标签云，并且由于我的实施不佳，有时某些词会从浏览器的边缘滑落窗口，所以它们是半可见的）。

driver.find_element_by_css_selector("div.someclass").is_displayed()，这是我可以在其他地方找到的唯一解决方案，似乎不起作用；即使元素部分可见，它也会返回 True 。

有没有办法可以检查整个元素（包括填充等）在标准浏览器视口中是否可见？

我正在用 Python 实现，所以 Python 风格的答案将是最有用的。

是否可以确定用户是否可以看到 html 元素？

例子

一个页面有一个带有日期选择器的输入字段。如果用户单击输入字段，则会出现另一个 div，允许用户选择所需的日期。

只要日期选择器可见，它就会隐藏它后面的元素。我需要一种方法来判断一个元素是否被隐藏。

第一种方法

一种方法是检查和比较z-index值。但是如果它们被明确设置，它们总是auto.

另一种方法可能是一种检查元素是否对用户可见的方法。但我想不出任何方法来做到这一点。

该:visible选择并不在这种情况下工作，因为该元素只隐藏到用户的眼睛，但仍清晰可见。

有什么建议？

这个问题可能听起来很愚蠢,但它让我头晕目眩.我想制作一种由不同幻灯片组成的垂直滚动演示文稿; 效果应与此网站"相似":http://www.soleilnoir.net/believein/#/start

我创建了一个包含不同幻灯片的无序列表:

<div id="main">
  <div id="content">
    <ul id="bg">
      <li id="slide1"> <!-- content --></li>
      <li id="slide2"> <!-- content --></li>
    <!-- and so on -->
    </ul>
  </div>
</div>

我已经position:fixed在页面的中心给出了所有幻灯片的内容(到目前为止是图像),以及一个不同的z-index来叠加幻灯片和图像.就像是

-----  slide 1
  §§§ image 2
-----  slide 2
  §§§ image 3
----   slide 3

等等

这当然仅在某种意义上起作用:当滚动时,幻灯片揭示了下面的幻灯片,但是由于它们的固定位置,以前的图像总是可见而全部从流中移除.

所以我想给图像一个position:absolute(并给予position:relative它<li>),但这并不会使它们在页面的中心"粘",直到新的幻灯片到达并覆盖它,它们当然自然地跟随它们的父母<li>的运动.

我完全不知所措,还有如何在窗口中获取当前的可见列表.我看了所有的内置的jQuery提供的功能:scrollTop(),offset().top,position().top,我得到$(window).height()的$('#container').height(),<li>身高是固定的,等,但我得到的是元素的"绝对"位置(我的意思是,它不会改变滚动),我无法弄清楚如何说幻灯片在屏幕中间,以便我可以做某事(但仍然不知道是什么).

我确定我在这里遗漏了一些明显的东西.我已经研究了链接网站的代码,虽然我几乎可以理解它的一切,但我还是无法弄清楚它是如何得到当前的幻灯片(此外,它与我的工作方式不同,因为它加载动画的GIF动态和只对每张幻灯片都这样做.在我的每张幻灯片中都是一个包含不同元素,动画等的容器.

例如,如果$('li#slide3')是在视图内,我该如何获得？如何解决堆叠图像问题？我是否需要动态地将它们设置为"固定",或者在每次滚动时重新计算它们的位置以便做到这position:absolute一点？对于这一秒,我仍然需要将每个元素的位置与固定点进行比较(我相信$(window).scrollTop(),到目前为止,滚动时总是为0),但我无法弄清楚如何. …

我已经搜索过了,但没有找到关于它的更多信息.可以使用:悬停效果创建和转换CSS,例如:

div { color: red;} div:hover {color: blue;}

而你只需要添加到这个CSS的过渡.但是我希望启动动画的触发器是DIV出现在屏幕上的时候.

我怎样才能做到这一点？

我有一些页面有多个输入框，用户可以在其中输入文本。其中一些需要在单击“下一步”按钮之前填写。我有验证错误弹出供用户查看但是如果问题是否离开页面我希望页面滚动到它而不是他们必须搜索丢失/错误的字段。

我有一个滚动到位，但我无法确定要滚动到哪个元素的哪个元素。例如，如果输入位于页面折叠上方，我想滚动到标签，以便他们可以看到错误和输入。但如果它低于折叠，我想选择输入，以便显示在折叠上方。这有任何意义吗？

我想我真正要问的是，有没有办法确定元素在页面上的位置。如果它在折叠上方滚动到标签，但如果它在折叠下方则滚动到输入？

现在我只是滚动到错误的输入字段。

$(".container-content").mCustomScrollbar("scrollTo",$('.container-content').find('input.error:first')); //Yes I am using a plugin for the scroll

如果我只是滚动到标签，那么它看起来像这样。

我正在制作一个网络应用程序，其中包含一个隐藏的侧边栏，通过从右侧移动出现。实现这一点的最明显方法是overflow: hidden;在父元素上隐藏屏幕外的侧边栏，并使用 css 转换为right属性设置动画，以便在用户按下按钮时显示。

但是，我发现即使overflow: hidden;禁用了滚动条，用户也可以通过使用 Ctrl+F 将父元素滚动到侧边栏，或者在侧边栏上的元素应该隐藏在屏幕外时使用 Tab 键，推动一些主应用程序在屏幕外。

这是我用来演示问题的 JSFiddle。

虽然这不是一个特别大的问题（它可以通过再次切换侧边栏来解决），但这显然是不可取的，我还没有找到处理它的好方法。

我可以使用 javascript 来侦听要在侧边栏上transitionend设置的事件，visibility以便hidden在侧边栏隐藏时无法选择文本，但是用户仍然可以在转换发生时执行此操作，并且无论如何都可以在屏幕外滚动。

我还可以将所有文本放在伪元素中并添加tabindex="-1"所有可聚焦元素，这样就没有任何东西可以选择了，但这似乎超出了顶部并且也很混乱，不允许用户按 Ctrl+F 或 Tab 键切换到侧边栏上的元素当它可见时，这是不可取的。

我也可以让侧边栏从左侧而不是右侧出现，但我宁愿先看看是否有更好的方法来执行此操作，而不是更改应用程序的整个设计。

如果这已在其他地方得到解决，我深表歉意，但我四处搜索并没有发现任何与我的问题有关的内容。

我正在尝试使div捕捉到视口的中心，现在它只是捕捉到顶部。我试图将偏移量设置为50％，但只能以px为单位。

编辑

我在其中尝试添加一个新的小提琴 $(window).scrollTop() / 2)

http://jsfiddle.net/kZY9R/84/

$("#item").offset().top - 100

var body = $("html, body");
var items = $(".item");
var animating = false;

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    if (!animating) {
        $.data(this, 'scrollTimer', setTimeout(function() {

            items.each(function(key, value) {
                if ($(value).offset().top > $(window).scrollTop()) {
                    animating = true;
                    $(body).stop().animate( { scrollTop: $(value).offset().top }, 1000,'swing');
                    setTimeout(function() { animating = false; }, 2000);
                    return false;
                }
            });
        }, 50));
    }
});

首先,我要感谢Kosmos的惊人答案.

如何控制youtube视频播放和暂停取决于框架或播放器的可见性.有没有办法用youtube嵌入带有HTML标签的视频？

例如 :

<br><br><br>

<div class="container">

    <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Tab One</li>
        <li class="tab-link" data-tab="tab-2">Tab Two</li>
        <li class="tab-link" data-tab="tab-3">Tab Three</li>
        <li class="tab-link" data-tab="tab-4">Tab Four</li>
    </ul>

    <div id="tab-1" class="tab-content current">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div id="tab-2" class="tab-content">
         Duis aute irure dolor in …