JavaScript로 끝까지 스크롤하지 않으면 검사할 수 없는 규칙 만들기

규약과 동의를 이용한 검사 버튼을 작성하여 당시 조사한 내용을 총결산할 기회가 있다

원래 굴려야 되나?

나는 이것이 좀 마음에 걸려서 사례를 조사해 보았다.
변호사의 관점?쓴 내용은 적당히 검사할 수 있는 상태가 좋지 않다고 생각합니다.
사용 조항의 유효성을 바탕으로 하는'동의'의 취득 방법
사용 규약 동의를 얻을 때 중요한 것은 사용자가 사용 규약을 자세히 읽고 이 규약에 동의한 사람만 사용할 수 있는 서비스 체제를 구축하는 것이다.
예컨대 규약만 부착된 링크보다 규약 전문을 스크롤하지 않으면 확인란에 도달하지 못할 경우'읽지 않았다'고 주장할 위험이 줄어든다.
여기에는 재판례가 총결산되어 있다.(3건만 찾았다고 한다)
여기만 보면 굴러야 하는지 모르겠지만 규칙 변경에도 문제가 있는 것 같다.
'규약 사용 동의'화면의 UI 디자인에 대한 일본 재판례 총결
첫 번째는 이토 아호(@redipsjp) 선생님이 트위터에 정보를 제공한 재판례다.이전에 규칙을 사용하여 스크롤한 텍스트 상자 아래에 약속 단추를 설정했습니다.법원은 이 설계라면 규약을 보는 것이 당연하다고 단정했다.

순수 JS로 해볼게요.

우선 굴러갈 수 있는div 요소를 만들어 보도록 하겠습니다.

css의 overflow-y를scroll로 설정하면 스크롤 가능한 요소를 만들 수 있습니다.
See the Pen eqZodo by buntafujikawa ( @buntafujikawa )
on CodePen .

마지막까지 스크롤 여부를 결정합니다.

이전에 만든 스크롤 요소가 끝까지 스크롤되는지 확인합니다.

판정 방법

다음 계산을 통해 아래로 굴러갔는지 알 수 있을 것 같습니다br/>
clientHeight + scrollTop = scrollHeight

clientHeight

원소의 픽셀 단위 높이를 되돌려줍니다 (height)

scrollHeight

a measurement of the height of an element's content

scrollTo

the number of pixels that an element's content is scrolled vertically.

스크롤 이벤트 가져오기

onscroll에서 스크롤할 때의 이벤트를 가져올 수 있습니다p>

onscroll은 아까 판정식으로 조합된 거예요.br/>

See the Pen gVLwjg by buntafujikawa ( @buntafujikawa )

on CodePen .

最終的にできたもの

단순히if문장을 넣는 조건분지일 뿐입니다

See the Pen
oKYzQX by buntafujikawa ( @buntafujikawa )

on CodePen .

注意点

실제로 이렇게 사용하면 iOS의safari는 매우 끊긴 스크롤 바가 됩니다br/>
기본적으로 손가락이 닿을 때만 굴러갑니다.

아래 CSS 스크롤을 사용하면 매끄러워져서 사용자에게 사용하기 쉽지만 비표준을 사용할지 여부는 개별적인 판단이 필요합니다br/>
-webkit-overflow-scrolling

이 기능은 표준적이지 않고 표준화 계획도 없습니다.공개된 사이트에서 사용하지 마세요.일부 사용자는 사용할 수 없습니다.설치마다 큰 차이가 있기 때문에 장래에 행동거지가 바뀔 수 있습니다.

OSS에서 사용하는 건가요?나는 이렇게 생각해서 조사한 결과 문제를 제기했다. 스타가 2000개가 넘는 라이브러리도 사용되었으니 issue는 사용하지 않는 것이 좋겠다.br/>
eact-custom-scrollbars

고장이 발생하면 원래 규약에 동의할 수 없으며, 사용 시 스스로 책임을 져야 합니다.

おわりに

이 글을 쓴 후에야 알아차렸는데 Element.scrollHeight
아래에 데모가 기재되어 있고 거의 같은 코드 예를 실었다

마지막을 잘 봤으면 좋겠는데...