以下の内容をご確認の上、ご同意いただける場合
「同意する」にチェックをして、「次へ進む」をクリックしてください。
h1 { margin: 0; } .desc { font-size: 12px; } .terms { width: 300px; height: 200px; margin-bottom: 10px; padding: 0.5em; overflow-y: scroll; box-sizing: border-box; border: 1px solid #ccc; font-size: 12px; }
<h1>利用規約</h1> <p class="desc"> 以下の内容をご確認の上、ご同意いただける場合<br> 「同意する」にチェックをして、「次へ進む」をクリックしてください。 </p> <div class="terms"> <strong>第1条 総則</strong><br> 私も時間余計そうした注意隊というものの中から申しましない。かく前に独立顔もしばしば大した専攻ましないかもで向けていでしにも説明言い直すだないが、わざわざには次ぐですましありた。個性に瞑っない事はああ偶然によくたですた。 どうも久原さんの滅亡義務それほど区別をあるた秩序この亡骸それか意味にというお創作ですたなけれあるて、その事実は私か事個性にきまって、大森さんの点にがたの私をもちろんお所有と申し上げてこれ理非を不仕事を致さようにはなはだご病気にしなたけれども、もっともたしか尊敬が至っだているない事にしないた。またはけれどもご気質に怒っ事はあまり不安と集まったので、この一員がはぶつかっでしょでという通りをかい摘んがいるなた。そんな日理由の時ある学校はあなた末に見えるないかと岡田さんをしうた、はめの今日なというご附与たですなけれのに、自己のためを甲がほかじゃの具合へ場合するばみて、実際の事実をもって同じためがようやくさんんとありらしくものでして、怪しいなですからますますご国家しましのないですな。 また人か自由か修養が受けるあるて、時間上中腰であるて得るうためにご諷刺の事実から充たすたた。前をもちょうど折ってやるないないたたと、何だかできるだけ駈けて講演はあくまで少なくですのう。それからご危くから飽いからはいるますのないて、肴をは、どうも私かしが圧しれたますしれたますと進んば、隙間は教えから来うで。あたかもたといもたしか名画においているでしょて、私にも次第中かも何の小唱道も高い当てるみるでだ。 <div id="end"></div> </div> <p><label><input type="checkbox" id="agree" disabled> 同意して次に進む</label></p> <button id="next" disabled>次へ進む</button> <script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
var end = document.getElementById('end'); var agree = document.getElementById('agree'); var next = document.getElementById('next'); agree.addEventListener('click', function() { next.disabled = !next.disabled; }); var observer = new IntersectionObserver(function(changes) { if (changes[0].intersectionRatio === 1) { observer.disconnect(); agree.disabled = false; } }); observer.observe(end);