Question

有没有办法通过媒体查询检测垂直滚动距离？

媒体查询似乎是围绕检测媒体而设计的（令人震惊的权利：P），因此浏览器高度等内容是可测试的，但不具体说明页面滚动的距离。

如果不可能，但你知道JS中的一种方式（不是jQuery）随意发布！

Answer 1

首先，接受的答案不起作用。

正确的名称是

window.onscroll

而不是

window.onScroll

https://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);

Answer 2

我不相信CSS媒体查询是可能的，但我知道可以使用window.pageYOffset在JavaScript中找到滚动高度。如果您希望每次用户在页面上向上或向下滚动时都通过函数运行此值，您可以执行类似

的操作

window.onscroll = function() {
    scrollFunctionHere(window.pageYOffset);
};

或者只是：

window.onscroll = scrollFunctionHere;

如果函数本身检查了window.pageYOffset的值。

有关如何在JavaScript中有效使用window.onscroll的更多建议，请参阅mynameistechno's answer。

关于效率的重要说明：每次发出滚动事件时运行一个函数，如果在回调中执行任何非常重要的操作，都会撕掉CPU周期。相反，最好只允许回调每秒运行这么多次。这被称为“去抖”。

下面简单的去抖动滚动事件处理程序代码。注意文本如何每隔250ms在“HELLO”和“WORLD”之间切换，而不是每一帧：

var outputTo = document.querySelector(".output");
var timeout_debounce;

window.addEventListener("scroll", debounce);

function debounce(event) {
    if(timeout_debounce) {
        return;
    }

    timeout_debounce = setTimeout(clearDebounce, 250);
// Pass the event to the actual callback.
    actualCallback(event);
}

function clearDebounce() {
    timeout_debounce = null;
}

function actualCallback(event) {
// Perform your logic here with no CPU hogging.
  outputTo.innerText = outputTo.innerText === "HELLO"
    ? "WORLD"
    : "HELLO";
}

p {
  padding: 40vh;
  margin: 20vh;
  background: blue;
  color: white;
}

<p class="output">Test!</p>

Answer 3

在Jquery中，你有方法.scrollTop（）

http://api.jquery.com/scrolltop/

此示例使用窗口滚动进行div滚动。

$(window).scroll(function(){            
        $("div").css("margin-top", $(window).scrollTop())   
});

Answer 4

这是解决问题的一种方法。fhttps://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>

垂直滚动的媒体查询

4 个答案: