Đặt màu cho các phần trang phụ hiển thị khi cuộn băng cao su

Question

Ít nhất khi bạn cuộn qua cạnh trên mac, bạn sẽ thấy trang di chuyển xuống và để lại một màu đồng bằng phía sau nó. Iv'e đã ​​tìm ra bạn có thể thay đổi màu sắc bằng cách thiết lập màu nền của body. Nhưng có cách tiếp cận nào khác không? Bởi vì đôi khi tôi cần một màu khác nhau ở trên cùng và dưới cùng, v.v.

Answer 1

Giải pháp của tôi đã bị lừa một chút và sử dụng linear-gradient() trên thẻ html hoặc body để kiểm soát màu nền được phân đoạn cho một dự án cụ thể.

Thứ gì đó như thế này sẽ tách nền thành một nửa và chăm sóc các trình duyệt hiện đại.

background: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    color-stop(0.5, #8BC63E), 
    color-stop(0.5, #EEEEEE) 
); 
background: -o-linear-gradient(bottom, #8BC63E 50%, #EEEEEE 50%); 
background: -moz-linear-gradient(bottom, #8BC63E 50%, #EEEEEE 50%); 
background: -webkit-linear-gradient(bottom, #8BC63E 50%, #EEEEEE 50%); 
background: -ms-linear-gradient(bottom, #8BC63E 50%, #EEEEEE 50%); 
background: linear-gradient(to bottom, #8BC63E 50%, #EEEEEE 50%); 

Tôi đã có hỗn hợp may mắn nhận được các hành vi tương tự trên iOS, và có vẻ là phụ thuộc vào cách bố trí cụ thể.

Answer 2

Tôi cần đạt được điều gì đó tương tự.

Giải pháp được đăng bởi @tksb không hoạt động đối với tôi trên Chrome (OS X), có vẻ như Chrome sử dụng background-color để xác định nền băng cao su và bỏ qua background-image.

Các giải pháp tôi đã tìm thấy là sử dụng một chút JS

// create a self calling function to encapsulate our code 
 
(function(document, window) { 
 
    // define some variables with initial values 
 
    var scrollTop = 0; 
 
    var resetTimer = null; 
 
    
 
    // this function gets called when you want to 
 
    //reset the scrollTop to 0 
 
    function resetScrollTop() { 
 
    scrollTop = 0; 
 
    } 
 

 
    // add an event listener to `body` on mousewheel event (scroll) 
 
    document.body.addEventListener('mousewheel', function(evt) { 
 
    // on each even detection, clear any previous set timer 
 
    // to avoid double actions 
 
    window.clearTimeout(resetTimer); 
 
    
 
    // get the event values 
 
    var delta = evt.wheelDelta; 
 
    var deltaX = evt.deltaX; 
 

 
    // add the amount of vertical pixels scrolled 
 
    // to our `scrollTop` variable 
 
    scrollTop += deltaX; 
 
    
 
    console.log(scrollTop); 
 
    
 
    // if user is scrolling down we remove the `scroll-up` class 
 
    if (delta < 0 && scrollTop <= 0) { 
 
     document.body.classList.remove('scroll-up'); 
 
    } 
 
    // otherwise, we add it 
 
    else if (delta > 0 && scrollTop > 0) { 
 
     document.body.classList.add('scroll-up'); 
 
    } 
 
    
 
    // if no wheel action is detected in 100ms, 
 
    // we reset our `scrollTop` variable 
 
    window.setTimeout(resetScrollTop, 100); 
 
    }); 
 
})(document, window);

body { 
 
    margin: 0; 
 
} 
 
body.scroll-up { 
 
    background-color: #009688; 
 
} 
 
section { 
 
    min-height: 100vh; 
 
    background-color: #fff; 
 
} 
 
header { 
 
    height: 100px; 
 
    background-color: #009688; 
 
    color: #fff; 
 
} 
 

 

<section id="section"> 
 
    <header> 
 
    this demo works only on full-screen preview 
 
    </header> 
 
</section>

Dưới đây là một bản demo đầy đủ màn hình để kiểm tra nó: http://s.codepen.io/FezVrasta/debug/XXxbMa