Question

我想通过滚动内部div来滚动标题，因为隐藏了正文滚动 http://webnflash.com/temp/occupyAvailableHeight.htm 像whatsapp应用程序的想法 Whatsapp Scrolling Example

代码只是示例https://stackoverflow.com/a/21590751/5878424

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body{padding:0; margin:0;}
</style>
</head>

<body>
<div id="head" style="background:red;padding:10px; color: white" >Header content goes here <br> Header content goes here <br> Header content goes here</div>
<div id="body" style="background:black; color:white;padding:0 10px; overflow:auto"  >Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here Body content goes here <br>Body content goes here  <br> Body content goes here </div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(window).load(function(){ // Window load .. to ensure that images are loaded from header and footer part, then the body part is resized
    var winW = 630, winH = 460;
    if (document.body && document.body.offsetWidth) { 
        //Internet Explorer (backward-compatibility mode):
        winW = document.body.offsetWidth;
        winH = document.body.offsetHeight;
    }
    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetWidth ) {
        //Internet Explorer (standards mode, document.compatMode=='CSS1Compat'):
        winW = document.documentElement.offsetWidth;
        winH = document.documentElement.offsetHeight;
    }
    if (window.innerWidth && window.innerHeight) {
        // most other browsers – as well as IE9 (standards mode):
        winW = window.innerWidth;
        winH = window.innerHeight;
    }
    var headerHeight = $("#head").outerHeight(true); // include margin  
    var bodyMaxHeight = winH - headerHeight;
    $("#body").height(bodyMaxHeight);
    $("#body").css("min-height", bodyMaxHeight+"px");
    $("#body").css("max-height", bodyMaxHeight+"px");   
})        

</script>
</body>
</html>

如何将子或内部div滚动到滚动体

0 个答案: