javascript - w3schools ui




div에 수직 오버플로가 감지되면 이벤트를 발생시키는 방법이 있습니까? (3)

나는 화면 밖의 위치에있는 div를 사용하고 페이지 div와 똑같은 내용을 담고 있습니다 (이 업데이트를 유지해야합니다). 유일한 차이점은 여분의 div에는 "오버플로 : 숨김"이 없다는 것입니다.

이제는 두 div 사이의 높이에 차이가 있는지 확인하십시오. 그렇다면 오버플로 된 내용이 있습니다!

내 페이지의 html은 다음과 같습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        div.page {
            position: relative;
            background-color: #F2F2F2;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
            width: 794px;
            height: 1123px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 30px;
            margin-bottom: 30px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="form">
    <div id="page-1" class="page"></div>
    <div id="page-2" class="page"></div>
</div>
</body>
</html>

그것은 Word와 같은 페이지 매김 스타일을 시뮬레이션하고, 내용은 동적으로 각 페이지 div에 삽입됩니다. 페이지 div의 내용이 오버 플로우 된 경우 오버플로 된 내용을 다음 페이지 div에 넣거나 (다음 페이지가 없으면 새 페이지를 작성) 싶습니다. 그래서 콘텐츠가 넘칠 때 페이지 div가 이벤트를 트리거하도록하는 방법이 있는지 궁금해합니다. 따라서 콘텐츠 요소를 통해 루프를 뒤집어서 다음 요소 div에 어떤 ​​요소를 넣을 지 결정할 수 있습니다.

올바른 방향으로 어떤 추진력이라도 엄청난 도움이 될 것입니다! 고맙습니다.


다음 정의를 통해 명확하게 설명해주십시오.

보기 - 볼 수있는 영역 또는 내용이 들어있는 상자

content - 오버 플로우 된 내용.

뷰 간의 차이에 대해 오버플로 검사를 감지합니다. offsetHeight 및 내용 offsetHeight 및 초과 된 내용은이 빼기 값입니다.


예. "오버플로"이벤트를 사용하십시오.

window.addEventListener ("overflow", yourFunction, false);

오버플로 : 숨김을 해제하고 오버플로하도록 설정해야 할 수도 있습니다 (예 : 자동). 일단 실행하면 오버플로를 숨김으로 다시 설정하고 나머지 콘텐츠 분할 루틴을 설정할 수 있습니다.

크롬과 사파리는 비슷한 이벤트가 있다고 생각합니다. "오버 플로우 된"







pagination