垂直滚动的媒体查询
垂直滚动的媒体查询
提问于 2013-06-05 00:16:01
有没有办法通过媒体查询来检测垂直滚动距离？
似乎媒体查询是围绕检测媒体而设计的(令人震惊的是:P)，所以浏览器高度之类的东西是可测试的，但并不是特定的页面向下滚动了多远。
如果是不可能的，但你知道一个方法在JS (不是jQuery)请随意张贴！
回答 3
Stack Overflow用户
发布于 2014-05-16 08:38:42
首先，公认的答案不起作用。
正确的名字是
window.onscroll而不是
window.onScrollhttps://developer.mozilla.org/en-US/docs/Web/API/window.onscroll
其次，这是非常低效的，因为函数被调用的次数远远超过了它所需的次数，并且在滚动时会使页面变得迟钝。来自John Resig：
http://ejohn.org/blog/learning-from-twitter/
使用每隔150毫秒运行一次的计时器要好得多--例如：
var scrolled = false;
window.onscroll = function() {
scrolled = true;
}
setInterval(function(){
if (scrolled) {
scrolled = false;
// scrollFunction()
}
}, 150);Stack Overflow用户
发布于 2015-03-12 16:59:24
在Jquery中，您有.scrollTop()方法
http://api.jquery.com/scrolltop/
此示例使用窗口滚动创建div滚动。
$(window).scroll(function(){
$("div").css("margin-top", $(window).scrollTop())
});Stack Overflow用户
发布于 2020-12-08 06:52:01
这里有一种解决方法。f https://jsfiddle.net/oravckzx/1/
$(window).scroll(function(){
$('.post-sidebar').each(function(){
var ScrollTopVar = $(window).scrollTop();
var OffsetTopVar = $(this).offset().top;
var OuterHeightVar = $(this).outerHeight();
var PositionVar = OffsetTopVar-(OuterHeightVar*1.1);
if (ScrollTopVar >= PositionVar) {
$('.hide') .css('background','green').css('font-size','12px')
$('.post-sidebar') .css('background','orange').css('font-size','12px')
$('.hide') .css('background','green').css('font-size','12px')
$('.post-sidebar') .css('background','gray').css('font-size','12px')
document.getElementById("demo3").innerHTML = ScrollTopVar;
document.getElementById("demo2").innerHTML = PositionVar;
}else {
$('.hide') .css('background','yellow').css('background','yellow')
$('.hide') .css('background','yellow')
$('.hide') .css('background','yellow')
document.getElementById("demo").innerHTML = ScrollTopVar;
document.getElementById("demo12").innerHTML = ScrollTopVar;
document.getElementById("demo13").innerHTML = ScrollTopVar;
document.getElementById("demo14").innerHTML = ScrollTopVar;
document.getElementById("demo2").innerHTML = PositionVar;
}
});
});.red {height:100px;
background:red;margin-bottom:20px;}
.hide {height:50px;background:blue;margin-bottom:20px;}
.post-sidebar {
height:50px;
background:yellow;
margin-bottom:20px;
box-sizing: border-box;
display: block;
font: normal 700 34px Lato, sans-serif;
padding-right: 20px;
width: 452px;
}
.p {
font: normal 700 14px Lato, sans-serif;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="red"><p id="demo"></div>
<div class="red"></div><p id="demo12">ok
<div class="red"><p id="demo13">ok</div>
<div class="post-sidebar"><p id="demo2"></p><p>lizard</p></div>
<div class="hide"><p id="demo2">If reaches to chosen class in html, saves value of ScrollTopVar (as distance from top) to separate variable as eventually PositionVar (which is the distance from top to the chosen class in html, - and that specific distance depends of device which is doing it), and then does certain action if ScrollTopVar value matches or exceeds PositionVar value. Else sets it back if needed, if not including Else it remains as it once met the value. <p id="demo3"></div>
<div class="red"><p id="demo14">ok</div>
<div class="red"><p id="demo"></div>
<div class="red"><p id="demo"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16922731
复制相关文章
相似问题