R
R
Roman Andreevich2020-02-12 17:35:26
JavaScript
Roman Andreevich, 2020-02-12 17:35:26

How to calculate the offset of an element inside a block on the wheel event?

Colleagues of the good time of the day, I ask for the help of experts, because I'm stuck on one moment. there is a list:

<div class="container">
        <div class="layout">
            <div class="item">
                <div class="header">name</div>
                <ul>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                </ul>
            </div>
            <div class="item">
                <div class="header">name</div>
                <ul>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                </ul>
            </div>
        </div>
    </div>


when the wheel event occurs, the layout is shifted, there are no problems here:

_whell_action(e) {

        let direction = -Math.sign(e.deltaY);
        let step = 5 * direction;

        this.layout.style.top = (this.layout.offsetTop + step) + 'px';

        if (this.layout.offsetTop >= 0) this.layout.style.top = '0px';
        if (this.layout.offsetTop <= (this.container.clientHeight - this.list_height)) 
            this.layout.style.top = (this.container.clientHeight - this.list_height) + 'px';

        let header = this.current_item.querySelector('.header');
             header.style.top = (header.offsetTop + step) + 'px';

    }


But I can't calculate the distance to move the header in the same direction inside the item, as long as the header is inside. I define the current item and how to determine the offset? please help, thanks in advance

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question