Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   как сместить элемент внутри блока при wheel? (https://javascript.ru/forum/misc/79463-kak-smestit-ehlement-vnutri-bloka-pri-wheel.html)

Роман Андреевич 12.02.2020 16:37

как сместить элемент внутри блока при wheel?
 
коллеги доброго времени суток, прошу помощи знатоков, ибо залип над одним моментом. есть список:

<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>


при событии wheel происходит смещение layout, тут проблем нету:

_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';

    }


Но не могу посчитать расстояние, на которое нужно двигать в том же направлении и header внутри item, до тех пор пока не сам header внутри. Определяю текущий item а как определить смещение? прошу помощи, заранее спасибо

Роман Андреевич 12.02.2020 19:15

всем спасибо, вопрос решен


Часовой пояс GMT +3, время: 17:14.