オーバーレイで垂直スクロールが機能しない

Question

ウェブページに背景不透明度をオーバーレイしようとしていますが、オーバーレイが適用されると、ウェブページの垂直スクロール機能が無効になります。

次のようにjQueryとCSS：

$(document).ready(function(){ 
    $("body").append("div").attr("id","overlay"); 

    $("#overlay").css({ 
     "position" : "fixed", 
     "width" : "100%", 
     "height" : "100%", 
     "z-index" : "10", 
     "background": "#000", 
     "opacity": "0.5" 
    }); 

    $("body").css({ 
     "overflow-y" : "scroll" 
    }); 

}); 

Answer 1

スニペット：。

Fiddle

$(document).ready(function(){ 
 
$("body").append("div").attr("id","overlay"); 
 
$("#overlay").css({ 
 
     "position" : "absolute", 
 
     "width" : "100%", 
 
     "height" : "1700px", 
 
     "z-index" : "10", 
 
     "background": "#000", 
 
     "opacity": "0.5" 
 
    }); 
 

 
    $("body").css({ 
 
    "overflow-y" : "scroll" 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>