{"id":5532,"date":"2011-04-03T22:24:25","date_gmt":"2011-04-03T13:24:25","guid":{"rendered":"http:\/\/fukata.org\/?p=5532"},"modified":"2017-08-11T22:58:49","modified_gmt":"2017-08-11T22:58:49","slug":"javascript-draw-within-screen","status":"publish","type":"post","link":"https:\/\/blog.fukata.org\/archives\/5532\/","title":{"rendered":"\u753b\u9762\u5185\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u307f\u3092\u63cf\u753b\u3059\u308bJavaScript"},"content":{"rendered":"<p>zenback\u306e\u3088\u3046\u306b\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u753b\u9762\u5185\u306b\u6765\u305f\u969b\u306b\u63cf\u753b\u3092\u884c\u3046\u3068\u3044\u3046\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u52e2\u3044\u3067\u66f8\u3044\u305f\u306e\u3067\u3001\u516c\u958b\u3057\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>\u30b3\u30fc\u30c9\u306f\u5358\u7d14\u306a\u30b9\u30af\u30ea\u30d7\u30c8\u3068\u3057\u3066\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u5b9f\u969b\u306b\u4f7f\u3046\u5834\u5408\u306b\u306fjQuery\u30d7\u30e9\u30b0\u30a4\u30f3\u7b49\u306b\u3057\u3066\u3082\u3046\u5c11\u3057\u4f7f\u3044\u3084\u3059\u3044\u5f62\u306b\u3057\u3066\u3082\u826f\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002\u305f\u3060\u3001\u3042\u307e\u308a\u4f59\u8a08\u306a\u51e6\u7406\u3092\u5165\u308c\u3066\u809d\u5fc3\u306e\u51e6\u7406\u901f\u5ea6\u3092\u640d\u306a\u3046\u306e\u3082\u5acc\u3060\u3063\u305f\u306e\u3067\u4eca\u56de\u306f\u30b4\u30ea\u3063\u3068\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p><!--more--><\/p>\n<p>viewSelector, drawView\u306b\u95a2\u3057\u3066\u306f\u9069\u5f53\u306a\u5024\u306b\u66f8\u304d\u63db\u3048\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre lang=\"JavaScript\">\r\n$(function(){\r\n        var $w = $(window);\r\n        var $h = $('html,body');\r\n        var offset = $w.height();\r\n        function canDraw($target, info) {\r\n                var top = $target.position().top;\r\n                if (info.st - offset < = top &#038;&#038; top <= info.st + info.wh + offset) {\r\n                        return true;\r\n                }\r\n                return false;\r\n        }\r\n        function isFinish($target, info) {\r\n                var top = $target.position().top;\r\n                if (info.st + info.wh + offset < top) {\r\n                        return true;\r\n                }\r\n                return false;\r\n        }\r\n        function updateView() {\r\n                var viewSelector = 'INPUT SELECTOR';\r\n                $views = $(viewSelector);\r\n                if ($views.length==0) return;\r\n\r\n                var sizeInfo = {\r\n                        'st':$w.scrollTop(),\r\n                        'wh':$w.height()\r\n                };\r\n                console.log('updateView: scrollTop='+sizeInfo.st+', windowHeight='+sizeInfo.wh);\r\n                $views.each(function(){\r\n                        var $self = $(this);\r\n                        if (canDraw($self, sizeInfo)) {\r\n                                console.log('view target='+$views.index($self));\r\n                                drawView($self);\r\n                        } else {\r\n                                if (isFinish($self, sizeInfo)) {\r\n                                        console.log('finish.');\r\n                                        return false;\r\n                                }\r\n                        }\r\n                        var top = $self.position().top;\r\n                });\r\n        }\r\n\r\n        function drawView($target) {\r\n\t\t\/\/FIXME implement.\r\n        }\r\n        \r\n        updateView();\r\n        $(window).scroll(updateView);\r\n});\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>zenback\u306e\u3088\u3046\u306b\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u753b\u9762\u5185\u306b\u6765\u305f\u969b\u306b\u63cf\u753b\u3092\u884c\u3046\u3068\u3044\u3046\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u52e2\u3044\u3067\u66f8\u3044\u305f\u306e\u3067\u3001\u516c\u958b\u3057\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002 \u30b3\u30fc\u30c9\u306f\u5358\u7d14\u306a\u30b9\u30af\u30ea\u30d7\u30c8\u3068\u3057\u3066\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u5b9f\u969b\u306b\u4f7f\u3046\u5834\u5408\u306b\u306fjQuer &#8230; <a href=\"https:\/\/blog.fukata.org\/archives\/5532\/\"> \u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":2,"featured_media":9223372036854775807,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1980],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.fukata.org\/wp-json\/wp\/v2\/posts\/5532"}],"collection":[{"href":"https:\/\/blog.fukata.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.fukata.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.fukata.org\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.fukata.org\/wp-json\/wp\/v2\/comments?post=5532"}],"version-history":[{"count":0,"href":"https:\/\/blog.fukata.org\/wp-json\/wp\/v2\/posts\/5532\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.fukata.org\/wp-json\/wp\/v2\/media\/9223372036854775807"}],"wp:attachment":[{"href":"https:\/\/blog.fukata.org\/wp-json\/wp\/v2\/media?parent=5532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.fukata.org\/wp-json\/wp\/v2\/categories?post=5532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.fukata.org\/wp-json\/wp\/v2\/tags?post=5532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}