私はHTMLに4つのdivを持っています。ユーザーが特定のdivにスクロールしてJavaScriptを使用してdiv IDを警告するとき
<html>
<body>
<div id="div1">aaaaa</div>
<div id="div2">bbbb</div>
<div id="div3">cccc</div>
<div id="div4">dddd</div>
</body>
</html>
ユーザーがページをスクロールすると、どのdivが表示されているかを警告したり、特定のdiv IDを表示したりする必要があります。例：コンテンツaaaaを見ているときにdiv1を表示または警告する必要があります。
これはJavaScriptを使用して行う必要があります。
あなたの答えのJSバージョン：
あなたは第二のdiv（オレンジ背景色）
window.onscroll = function() {
var elem = document.getElementById("div2");
var hT = elem.offsetTop,
hH = getAbsoluteHeight(elem),
wH = window.innerHeight,
wS = window.pageYOffset;
if (wS > (hT+hH-wH)){
alert('you have scrolled to the Div2!');
}
}
function getAbsoluteHeight(el) {
// Get the DOM Node if you pass in a string
el = (typeof el === 'string') ? document.querySelector(el) : el;
var styles = window.getComputedStyle(el);
var margin = parseFloat(styles['marginTop']) +
parseFloat(styles['marginBottom']);
return Math.ceil(el.offsetHeight + margin);
}div {
width: 100%;
height: 500px;
background-color: tomato;
}
#div2 {
background-color:orange;
}<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>希望にスクロールしたときにこれは、このことができますあなたに警告を与えます:)
いいえ、私はjqueryプラグインを使用せずに必要です。上記のJqueryを使用してください。それは正しい答えではありません。私は純粋なjavascript @ Mr.7に入るのを助けてください。 –
申し訳ありませんが、私の代わりにあなたのコードを掲載しました。今私は更新:) –
スクリプトの作成を開始しましたか？はいの場合は、私たちと共有してください！ _NO_の場合、それを絞る... – Rayon
あなたはdivのonFocusイベントを使用することができます。 onFocus = 'myFunction（this）;' – dgk
あまりにも広すぎる閉鎖。ここでの質問には真の努力が必要です。スタックオーバーフローは、自由な作業を要求できるリソースではありません。 – halfer