Media Query for Vertical Scroll

media query for vertical scroll

I don't believe it's possible with a CSS media query, but I do know that the scroll height can be found in JavaScript using window.pageYOffset. If you wanted to run this value through a function every time the users scrolled up or down on a page, you could do something like

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

Or just:

window.onscroll = scrollFunctionHere;

If the function itself checked the value of window.pageYOffset.

For more advice on how to do use window.onscroll efficiently in JavaScript, refer to mynameistechno's answer.

Important note on efficiency: running a function every single time a scroll event is emitted can tear through CPU cycles if anything non-trivial is performed in the callback. Instead, it is good practice to only allow a callback to run so many times per second. This has been termed "debouncing".

Simple debounced scroll event handler code below. Notice how the text toggles between "HELLO" and "WORLD" every 250ms, rather than every single frame:

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>

issue with CSS media queries(scrollbar)

Firefox & Webkit based browsers render the scrollbar differently. In Firefox, MediaQuery considered width of scrollbar which is 15px with the screen width, but in Webkit based browsers it's not considered scrollbar with the screen width. So, that's why the floated DIVs are collapsed in Firefox.

I did some stuff with css may be that's help you. (check this fiddle)

        html {
            /* force scrollbars */
            height: 101%;
        }
        body {
            margin: 0; 
            padding:0; 
            white-space:nowrap; 
        }  
        #box1,
        #box2 {
            display:inline-block;
            width: 400px;
            height: 200px;  
            vertical-align:top;
            white-space:normal;
        }
        #box1 {
            background: #ce0000;
             margin-right:-5px;
        }
        #box2 {
            background: #8e0000;
        }

        @media screen and (max-width: 799px) { 
            body { 
                white-space:normal; 
            }
            #box1,
            #box2 {
                width: 300px;
            }
        }

Vertically responsive panel with overflow scroll

The best decision I've found in my case is using max-height for div class= "overflow" and media-queries min-height.
I noticed scroll is displayed if to set max-height for div class= "overflow". But max-height should be at least in 'px', not in '%'.
Also max-height should be different for different resolutions. I set some breakpoints for max-height using media queries. Something like this:

@media(min-height:520px) {
  max-height: 170px;
}
@media(min-height:600px) {
  max-height: 250px;
}
@media(min-height:768px) {
  max-height: 400px;
}
@media(min-height:900px) {
  max-height: 500px;
} 
.....

It allows me having panel's height shorter than browser view's height in any resolutions and having or not having scroll inside panel (depends on quantity of items)
The same approach is applied to filter title + text-overflow

Here is video - http://take.ms/WBDcy

and here is code - http://plnkr.co/edit/SbMa9Ece2eOPJ2C0Lt5U?p=preview

When I was writing this post I've understood that using of max-height: 80vh maybe was even better than media queries. It should be tested.

---

Related Topics