{"id":6496,"date":"2024-09-19T11:47:43","date_gmt":"2024-09-19T02:47:43","guid":{"rendered":"https:\/\/taitan916.info\/blog\/?p=6496"},"modified":"2024-06-20T15:59:50","modified_gmt":"2024-06-20T06:59:50","slug":"post-6496","status":"publish","type":"post","link":"https:\/\/taitan916.info\/blog\/archives\/6496","title":{"rendered":"JavaScript\u306b\u3066\u30da\u30fc\u30b8\u5185\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u53ef\u80fd\u306a\u8981\u7d20\u3092\u6700\u5f8c\u307e\u3067\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u306a\u3044\u3068\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3067\u304d\u306a\u3044\u3088\u3046\u306b\u3059\u308b\u65b9\u6cd5"},"content":{"rendered":"

\u304a\u554f\u3044\u5408\u308f\u305b\u30da\u30fc\u30b8\u7b49\u3067\u300c\u500b\u4eba\u60c5\u5831\u306e\u53d6\u6271\u3044\u306b\u3064\u3044\u3066\u300d\u306e\u3088\u3046\u306a\u9577\u3044\u6587\u7ae0\u304c\u3042\u308a\u3001\u305d\u306e\u90e8\u5206\u306f\u30b9\u30af\u30ed\u30fc\u30eb\u53ef\u80fd\u306a\u8981\u7d20\u3068\u3059\u308b\u3002\u3053\u3061\u3089\u3092\u6700\u5f8c\u307e\u3067\u8aad\u3080(=\u30b9\u30af\u30ed\u30fc\u30eb\u3059\u308b)\u307e\u3067\u30d5\u30a9\u30fc\u30e0\u306e\u9001\u4fe1\u30dc\u30bf\u30f3\u3092\u62bc\u305b\u306a\u3044\u3088\u3046\u306b\u3057\u305f\u3044\u3002\u4ee5\u524d\u306b\u30e1\u30e2\u3057\u305fJS\u306eIntersectionObserver<\/a>\u3067\u5bfe\u5fdc\u3067\u304d\u305f\u3002\u4ee5\u4e0b\u306b\u30b5\u30f3\u30d7\u30eb\u3068\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u30e1\u30e2\u3002<\/p>\n

 <\/p>\n

\u30b5\u30f3\u30d7\u30eb<\/h2>\n

https:\/\/taitan916.info\/sample\/IntersectionObserver\/button\/<\/a><\/p>\n

\u30da\u30fc\u30b8\u8868\u793a\u6642\u306f\u30dc\u30bf\u30f3\u304c\u7070\u8272\u4e14\u3064CSS\u306ecursor\u304c\u300cnot-allowed\u300d\u306b\u306a\u3063\u3066\u304a\u308a\u3001\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u6642\u306b\u300c\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u6700\u5f8c\u307e\u3067\u8aad\u3093\u3067\u304f\u3060\u3055\u3044\u300d\u3068\u8868\u793a\u3055\u308c\u308b\u3002<\/p>\n

\u30b3\u30f3\u30c6\u30f3\u30c4\u90e8\u5206\u3092\u6700\u5f8c\u307e\u3067\u30b9\u30af\u30ed\u30fc\u30eb\u3059\u308b\u3068\u30dc\u30bf\u30f3\u304c\u9752\u8272\u4e14\u3064CSS\u306ecursor\u304c\u300cpointer\u300d\u306b\u306a\u308a\u3001\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u6642\u306b\u300cOK\u300d\u3068\u8868\u793a\u3055\u308c\u308b\u3002<\/p>\n

 <\/p>\n

\u5bfe\u5fdc\u65b9\u6cd5<\/h2>\n

\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h3>\n
<!DOCTYPE html>\r\n<html lang=\"ja\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\r\n<title>JavaScript\u306b\u3066\u30da\u30fc\u30b8\u5185\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u53ef\u80fd\u306a\u8981\u7d20\u3092\u6700\u5f8c\u307e\u3067\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u306a\u3044\u3068\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3067\u304d\u306a\u3044\u3088\u3046\u306b\u3059\u308b\u65b9\u6cd5\u30b5\u30f3\u30d7\u30eb<\/title>\r\n<\/head>\r\n<body>\r\n    <style>\r\n    .scroll{\r\n        overflow-y: auto;\r\n        height: 100px;\r\n        border: 1px solid #ccc;\r\n    }\r\n    .button{\r\n        background-color: #555555;\r\n        border: none;\r\n        color: white;\r\n        padding: 15px 32px;\r\n        text-align: center;\r\n        text-decoration: none;\r\n        display: inline-block;\r\n        font-size: 16px;\r\n    }\r\n    .off{\r\n        cursor: not-allowed;\r\n    }\r\n    .on{\r\n        background-color: #008CBA;\r\n        cursor: pointer;\r\n    }\r\n    <\/style>\r\n\r\n    <div class=\"scroll\">\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p>\u30b3\u30f3\u30c6\u30f3\u30c4<\/p>\r\n        <p class=\"footer\"><\/p>\r\n    <\/div>\r\n\r\n    <button class=\"button off\">\u30dc\u30bf\u30f3<\/button>\r\n\r\n    <script>\r\n    const footer = document.querySelector(`.footer`);\r\n    const options = {\r\n        root: null,\r\n        rootMargin: `0px`,\r\n        threshold: 1,\r\n    };\r\n    const observer = new IntersectionObserver(displayCheck, options);\r\n    observer.observe(footer);\r\n\r\n    function displayCheck(entries){\r\n        entries.forEach(entry => {\r\n            \/\/\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u6700\u5f8c\u307e\u3067\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u305f\u5834\u5408\r\n            if( entry.isIntersecting ){\r\n                \/\/.off\u3092\u524a\u9664\u3057\u3066.on\u3092\u8ffd\u52a0\r\n                document.querySelector(`.button`).classList.remove(`off`);\r\n                document.querySelector(`.button`).classList.add(`on`);\r\n            }\r\n        });\r\n    }\r\n\r\n    \/\/\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u6642\r\n    document.querySelector(`.button`).addEventListener('click', function(){\r\n        \/\/\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u72b6\u6cc1\u306b\u3088\u308a\u5206\u5c90\u51e6\u7406\r\n        if( document.querySelector(`.button`).classList.contains(`on`) ){\r\n            alert(`OK`);\r\n        }else{\r\n            alert(`\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u6700\u5f8c\u307e\u3067\u8aad\u3093\u3067\u304f\u3060\u3055\u3044`);\r\n        }\r\n    });\r\n    <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
 <\/p>\n
\u305d\u306e\u4ed6<\/h2>\n
\u30b3\u30f3\u30c6\u30f3\u30c4\u30b9\u30af\u30ed\u30fc\u30eb\u5f8c\u306b\u30da\u30fc\u30b8\u30ea\u30ed\u30fc\u30c9\u3059\u308b\u3068\u30b9\u30af\u30ed\u30fc\u30eb\u4f4d\u7f6e\u306f\u305d\u306e\u307e\u307e\u306b\u306a\u308b\u304c\u3001\u3053\u3061\u3089\u3092\u30ea\u30bb\u30c3\u30c8\u3057\u305f\u3044\u5834\u5408\u306f\u5148\u65e5\u30e1\u30e2\u3057\u305f\u300c\u30e2\u30fc\u30c0\u30eb\u30a6\u30a3\u30f3\u30c9\u30a6\u8868\u793a\u6642\u306b\u30a6\u30a3\u30f3\u30c9\u30a6\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u4f4d\u7f6e\u3092\u30ea\u30bb\u30c3\u30c8\u3059\u308b\u65b9\u6cd5<\/a>\u300d\u3092\u53c2\u7167\u3059\u308b\u3053\u3068\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u304a\u554f\u3044\u5408\u308f\u305b\u30da\u30fc\u30b8\u7b49\u3067\u300c\u500b\u4eba\u60c5\u5831\u306e\u53d6\u6271\u3044\u306b\u3064\u3044\u3066\u300d\u306e\u3088\u3046\u306a\u9577\u3044\u6587\u7ae0\u304c\u3042\u308a\u3001\u305d\u306e\u90e8 ... <\/p>\n","protected":false},"author":1,"featured_media":1067,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-6496","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/6496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/comments?post=6496"}],"version-history":[{"count":2,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/6496\/revisions"}],"predecessor-version":[{"id":6498,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/6496\/revisions\/6498"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/media\/1067"}],"wp:attachment":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/media?parent=6496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/categories?post=6496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/tags?post=6496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}