js控制右键菜单位置在可视区域

<div style="height:3000px;width:2000px">内容</div>
<style>#pop{visibility:hidden;height:150px;border:solid 1px #000;position:absolute;width:150px;left:0;top:0}</style>
<div id="pop">右键菜单</div>
<script>
    document.oncontextmenu = function (e) {
        e = e || window.event;
        var x = e.clientX, y = e.clientY;
        var pop = document.getElementById('pop'), width = pop.offsetWidth, height = pop.offsetHeight;
        var rootEL = document[document.compatMode == 'CSS1Compat' ? 'documentElement' : 'body']
        , viewWidth =rootEL.clientWidth
        , viewHeight = rootEL.clientHeight
        ,scrollLeft=Math.max(document.body.scrollLeft,document.documentElement.scrollLeft)
        ,scrollTop=Math.max(document.body.scrollTop,document.documentElement.scrollTop);
        pop.style.left = scrollLeft + (x + width > viewWidth ? viewWidth - width : x) + 'px';
        pop.style.top = scrollTop + (y + height > viewHeight ? viewHeight - height : y) + 'px';
       
        pop.style.visibility = 'visible'
        return false;
    }
</script>