首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

获取元素滚动后的显见高度

2013-10-11 
获取元素滚动后的可见高度!javascript怎么获取元素滚动后的可见高度!http://v2.freep.cn/3tb_131009110450

获取元素滚动后的可见高度!
javascript怎么获取元素滚动后的可见高度!http://v2.freep.cn/3tb_131009110450qew1512293.png
图片传不了,这么上传后的图片链接! javascript
[解决办法]
你这样试试:
当前的DIV本来的高度:A
滚动条当前位置距离顶部的高度:B
滚动条当前位置距离底部的高度:C
当前DIV距离顶部的高度:D(非margin-top高度,指该DIV上面的DIV的高度总和)
当前DIV距离底部的高度:E(非margin-top高度,指该DIV下面的DIV的高度总和)

然后这样:
当前DIV显示高度=A-(B-D>0?B-D:0)-(C-E>0?C-E:0)

demo:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="/js/jquery-1.7.min.js" type="text/javascript"></script>
    <title>测试</title>
    <style>
    body,html{ margin:0; padding:0;}
    </style>
</head>
<body>
    <div style="height: 300px">
        sfsd</div>
    <table id="table" style="width: 300px; border: 1; border-style: solid; border-width: 1px;
        height: 500px;">
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
            <td id="val">
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
    </table>
    <div style="height: 300px">
        sfsd</div>
</body>
<script>
    window.onscroll = function () {
        var A = 500;
        var B = parseInt($(document).scrollTop());
        var C = $(document).height() - $(window).height() - B;
        var D = 300;
        var E = 300;
        var BD = B - D;
        var CE = C - E;


        var val = A - (BD > 0 ? BD : 0) - (CE > 0 ? CE : 0);
        $("#val").text(val);
    }

</script>
</html>

热点排行