94日目：Pythonプログラミング - 茨の道も一歩から

Pythonプログラミングの講義28日目ですが、記事の中身はJavaScriptです。

今日の講義も自習がメインでした。内職はScrollとWheelイベント。

【講義内容】

自習

【ワンポイント】

sample.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Grid starting point</title>
    <style>
        .sixteen-box {
            display: grid;
            grid-template-areas:
            "1 2 3 4"
            "5 6 7 8"
            "9 10 11 12"
            "13 14 15 16";
            grid-column: repeart(4, 1fr);
            gap: 10px;
        }

        .box-item {
            grid-area: repeart(16);
            border-radius: 5px;
            padding: 10px;
            background-color: rgb(207,232,220);
            border: 2px solid rgb(79,185,227);
        }
    </style>
</head>

<body>
    <h1>Simple grid example</h1>
    <div class="sixteen-box">
        <p>WHEEL INFO: {{ wheel_info }}</p>
        <p>SCROLL TOP: {{ scroll.top }}</p>
        <p>SCROLL HEIGHT: {{ scroll.height }} CLIENT HEIGHT: {{ client.height }}</p>
        <div v-for="num in nums" class="box-item">{{ num }}</div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    el: ".sixteen-box",
    data() {
        return {
            nums: 16,
            wheel_info: null,
            scroll: {
                top: 0,
                height: 0
            },
            client: {
                height: 0
            },
            done: false
        }
    },
    created: function() {
        window.addEventListener('wheel', this.getWheel)
        window.addEventListener('scroll', this.getScroll)
    },
    methods: {
        getWheel: function(event) {
            console.dir(event)
            this.wheel_info = event.deltaY
        },
        getScroll: function(event) {
            console.dir(event.target.scrollingElement)
            this.scroll.top = event.target.scrollingElement.scrollTop
            this.scroll.height = event.target.scrollingElement.scrollHeight
            this.client.height = event.target.scrollingElement.clientHeight
            if(this.isDone()) {
                alert(`SCROLL TOP: ${this.scroll.top}`)
            }
        },
        isDone: function() {
            if(this.scroll.top>300 && !this.done) {
                this.done = true
                return true
            }
            return false
        }
    }
})
</script>
</body>

</html>