Как сроллить больший блок внутри фиксированного меньшего блока на ховер?

Question

[Владислав Бойченко]

Всем привет!
Такой вопрос:
Есть блок, высотой, допустим, 200рх с "overflow: hidden". Внутри него другой блок, в котором список элементов. Элементов много, и получается так, что этот внутренний блок высотой допустим 500рх, соответствено он обрезается до 200рх родительским и контент не выходит за эти пределы.
Есть кнопка, по ховеру на которую нужно, чтобы оно прокручивалось вниз. И как это реализовать -- не могу понять. Понимаю, что функцию надо писать на mouseover, но как эта функция должна выглядеть -- не понимаю. Может кто помочь?
Спасибо!

Answer 1

[Stopy]

https://jsfiddle.net/w95naLdp/1/

Comments

[Владислав Бойченко]

Я же написал, что мне на mouseover функция нужна. Так-то не проблема сделать, тогда бы и вопроса не было.

[Stopy]

Владислав Бойченко: есть parent, есть child, при ховере на parent делаешь своему относительному child'у css-свойство "top" в минус

[Stopy]

Владислав Бойченко: ну или так https://jsfiddle.net/w95naLdp/

[Иван Вишневский]

Stopy: не советую использовать свойство top в таких случаях, гораздо быстрее работает transform: translate()

[Stopy]

forgetable: Терзают меня сомнения в том что есть разница между этими свойствами в плане производительности, а вот в плане поддержки - очевидно. Ну а jsfiddle я привел вообще с margin.

[Владислав Бойченко]

Stopy: таким образом оно прокручивается полностью, но не останавливается, а продолжает дальше. Список уже где-то за пределами.

[Stopy]

Владислав Бойченко: ну вот, пришлось всё за тебя написать, обновил ответ

[Иван Вишневский]

Stopy: попробуйте поворочать большую картинку через transform и через top. А лучше несколько сразу. Разница будет ощутима. Также, transform: translate() уже давно поддерживатся всеми современными браузерами.