Форум

s24344 · #1 (**permalink**) 21.12.2018, 18:43

Здравствуйте. Подскажите, пожалуйста, как решить следующую задачу. Мне необходимо определить в следующем примере видимость секции при внутреннем скролле вниз и вверх, а точнее мне необходимо возвращать саму ноду, или выполнять какую-либо другую функцию, когда она попадет в зону видимости. Речь именно о внутреннем скролле.

https://codepen.io/s24344/pen/QzvVdY

рони · #2 (**permalink**) 21.12.2018, 19:17

s24344,

checkDistance (elem){
        let posElem = elem.getBoundingClientRect();
        if(posElem.top > 0 && posElem.top < window.innerHeight ) elem.classList.add("act");
        else elem.classList.remove("act");
    }

s24344 · #3 (**permalink**) 21.12.2018, 19:34

Спасибо. Подскажите пожалуйста, я верно понял, чтобы мне получить первый видимый элемент, я должен фильтровать по всем текущим элементам с class act, и получать первый?

рони · #4 (**permalink**) 21.12.2018, 19:41

s24344,
выше видимые относительно окна,
ниже относительно контейнера.

class Section {
    constructor(element) {
        this.element = element;
        this.weatherPanel = this.element.querySelector('[data-section-ref="weather-panel"]');
        this.groups = this.element.querySelector('[data-section-ref="groups"]');
        this.groupsSection = [...this.element.querySelectorAll('[data-section-ref="groups-section"]')];
        this.init();
    }

    init() {
        this.groups.addEventListener('scroll', this.move.bind(this));
    }

    checkDistance(elem){
        let posParent = this.groups.getBoundingClientRect();
        let posElem = elem.getBoundingClientRect();
        if(posElem.top >= posParent.top  && posElem.top < posParent.bottom ) elem.classList.add("act");
        else elem.classList.remove("act");
    }

    move(event) {

        this.groupsSection.forEach(this.checkDistance.bind(this));
        console.log(this.element.querySelector('.act')) //первый видимый
    }
}

const section = new Section(document.querySelector('[data-component="section"]'));

s24344 · #5 (**permalink**) 21.12.2018, 19:54

Большой спасибо за помощь. Вы мне уже помогли. Но Вы могли бы подсказать ответ ещё на один вопрос. Как мне верно дописать условие, чтобы я получал первый видимый элемент только в тот момент кода предыдущий элемент полностью исчезнет (панель с 'data' накроет нужную мне ноду)?

рони · #6 (**permalink**) 21.12.2018, 20:10

s24344,
не понимаю.

рони · #7 (**permalink**) 21.12.2018, 20:37

s24344,
возможный вариант...

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
      .section__container {
    max-width: 1366px;
    margin: 0 auto;
    display: flex;
}
.section__col-1 {
    width: 60%;
}
.section__col-2 {
    width: 40%;
}
.section__reverse-order {
    display: flex;
    justify-content: flex-end;
    background-color: #61bfad;
    padding: 20px;
    border-bottom: 1px solid #167c80;
}
.section__reverse-order-btn {
    min-width: 184px;
    border: 1px solid #52526c;
    background-color: transparent;
    color: #ffffff;
    border-radius: 100px;
    cursor: pointer;
    padding: 8px;
}
.section__weather-panel {
    background-color: #61bfad;
    padding: 20px;
    color: #ffffff;
}
.section__groups {
    max-height: 1200px;
    overflow-y: auto;
}
.section__groups-section {
    min-height: 200px;
    transition: 1s .6s;
}
.section__groups-section:nth-child(odd) {
    background-color: #eeeeee;
}
.section__groups-section:nth-child(even) {
    background-color: #e0e0e0;
}
.section__col-2 {
    background-color: #167c80;
}


.section__groups-section.red{
    background-color: #FF0000;
}
    </style>
</head>

<body>
<div class="app">
    <div class="app__inner">
        <main class="main">

            <section class="section" data-component="section">
                <div class="section__container">
                    <div class="section__col-1">
                        <div class="section__reverse-order"></div>
                        <div class="section__weather-panel" data-section-ref="weather-panel">
                            <div class="section__weather-panel-data">
                                data
                            </div>
                        </div>
                        <div class="section__groups" data-section-ref="groups">
                            <div class="section__groups-section" data-section-ref="groups-section">
                                <div class="section__groups-data">
                                    07.15
                                </div>
                            </div>
                            <div class="section__groups-section" data-section-ref="groups-section">
                                <div class="section__groups-data">
                                    07.30
                                </div>
                            </div>
                            <div class="section__groups-section" data-section-ref="groups-section">
                                <div class="section__groups-data">
                                    07.45
                                </div>
                            </div>
                            <div class="section__groups-section" data-section-ref="groups-section">
                                <div class="section__groups-data">
                                    08.00
                                </div>
                            </div>
                            <div class="section__groups-section" data-section-ref="groups-section">
                                <div class="section__groups-data">
                                    08.15
                                </div>
                            </div>
                            <div class="section__groups-section" data-section-ref="groups-section">
                                <div class="section__groups-data">
                                    08.30
                                </div>
                            </div>
                            <div class="section__groups-section" data-section-ref="groups-section">
                                <div class="section__groups-data">
                                    08.45
                                </div>
                            </div>
                            <div class="section__groups-section" data-section-ref="groups-section">
                                <div class="section__groups-data">
                                    09.00
                                </div>
                            </div>
                            <div class="section__groups-section" data-section-ref="groups-section">
                                <div class="section__groups-data">
                                    09.15
                                </div>
                            </div>
                            <div class="section__groups-section" data-section-ref="groups-section">
                                <div class="section__groups-data">
                                    09.30
                                </div>
                            </div>
                            <div class="section__groups-section" data-section-ref="groups-section">
                                <div class="section__groups-data">
                                    09.45
                                </div>
                            </div>
                            <div class="section__groups-section" data-section-ref="groups-section">
                                <div class="section__groups-data">
                                    10.00
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="section__col-2">
                        <div class="section__table">

                        </div>
                    </div>
                </div>
            </section>

        </main>
        <footer class="footer">
            footer
        </footer>
    </div>
</div>

<script>
class Section {
    constructor(element) {
        this.element = element;
        this.weatherPanel = this.element.querySelector('[data-section-ref="weather-panel"]');
        this.groups = this.element.querySelector('[data-section-ref="groups"]');
        this.groupsSection = [...this.element.querySelectorAll('[data-section-ref="groups-section"]')];
        this.init();
        this.temp = this.groupsSection[0]
    }

    init() {
        this.groups.addEventListener('scroll', this.move.bind(this));
    }

    checkDistance(elem){
        let posParent = this.groups.getBoundingClientRect();
        let posElem = elem.getBoundingClientRect();
        if(posElem.top + posElem.height >= posParent.top  && posElem.top < posParent.bottom ) elem.classList.add("act");
        else elem.classList.remove("act");
    }

    move(event) {

        this.groupsSection.forEach(this.checkDistance.bind(this));
        let first = this.element.querySelector('.act') //первый видимый
        if (first != this.temp ) {
           this.temp.classList.remove("red");
           this.temp = first;
           this.temp.classList.add("red");
        }
    }
}

const section = new Section(document.querySelector('[data-component="section"]'));
</script>

</body>

</html>

s24344 · #8 (**permalink**) 21.12.2018, 20:49

Большое спасибо за помощь.

Форум

Справочник

Discord чат

Курсы javascript