javascript - 如何在浏览器滚动条上显示div

标签 javascript browser scroll html lazy-loading

我的页面布局有几组重复的div

<div--1>

  <div--2>

    <div--3>

       <div--4>

这个结构重复了好几次。我想隐藏 div--4 的内容,直到用户滚动到该元素为止。我们如何才能实现该功能?

我找到了一个可以处理类似图像的插件(http://www.appelsiini.net/projects/lazyload)

最佳答案

此代码将根据鼠标位置显示和隐藏 div。不确定如何检测特定的 div 当前是否在屏幕上。

<html>
<head>
<title>Show/Hide Divs</title>
<script type="text/javascript">
function showMyContents(control)
{
 control.children["myContents"].style.display = 'inline';
}

function hideMyContents(control)
{
 control.children["myContents"].style.display = 'none';
}
</script>
</head>
<body>

<div onmouseover="showMyContents(this);" onmouseout="hideMyContents(this);">show 1
 <div style="display:none" id="myContents">My Contents1</div>
</div>
<div onmouseover="showMyContents(this);" onmouseout="hideMyContents(this);">show 2
 <div style="display:none" id="myContents">My Contents2</div>
</div>
<div onmouseover="showMyContents(this);" onmouseout="hideMyContents(this);">show 3
 <div style="display:none" id="myContents">My Contents3</div>
</div>

</body>
</html>

关于javascript - 如何在浏览器滚动条上显示div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3671118/

相关文章:

asp.net - FF 和 IE 不从 CSS 加载 img src

browser - 为什么 Chrome 和 IE 将 "Mozilla 5.0"放在发送到服务器的 User-Agent 中?

html - 为什么 td of table 在 div 中松开它们的宽度(用于滚动表)

ios - 如何在IOS SDK中用文字获得老虎机效果?

javascript - 可拖动+可排序和可滚动的 Div

javascript - jQuery - 复选框不更新文本

php - Node.js 与传统 PHP 框架 : How to combine?

javascript - Treepanel 在没有子节点的节点上展开/折叠 Extjs

javascript - 如何对动态 HTML5 数据描述符执行部分查找?

http - 为什么不使用其余的 HTTP 动词?