как добавить класс при hover? попробовал .el:hover.class{}; но не получилось, или это невозможно?
просто хотелось реализовать чтобы при ховере на прокручиваемого элемента сам body не скролился.
Вот как видите в примере, если наводите на блок с текстом, то только он скролится, но если вбок мышь поставите, то body начинает скролиться.
Также добавил при наведении скролл чтоб убирался у body при наведении на текстовый блок, но сразу скажу пока ":has" не поддерживается Firefox и некоторыми мобильными браузерами.
.scroll-content {
display: block;
width: 40%;
height: 100vh;
overflow: auto;
box-sizing: border-box;
border: 1px solid black;
}
body:has(.scroll-content:hover) {
overflow: hidden;
}<div class="scroll-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et metus ac est malesuada fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam massa, viverra in velit ut, condimentum ullamcorper eros. Etiam tincidunt augue turpis, et lacinia velit malesuada eleifend. Ut congue tristique libero at varius. Cras malesuada ac libero nec lobortis. Mauris tincidunt lectus quis justo tempus, in mattis massa rhoncus. Donec rhoncus in sem id auctor. Praesent in pellentesque felis, in egestas ipsum. Proin ornare turpis fermentum laoreet pharetra. In sed nulla diam. Fusce nulla libero, ullamcorper vitae eros consectetur, pellentesque tristique est.
Morbi mattis nisi nec mauris tincidunt faucibus. Ut porta ipsum lorem. Praesent a dapibus arcu, ac sagittis nunc. Nulla interdum urna nunc. Pellentesque placerat orci augue, sodales viverra libero fermentum ac. Phasellus id ante nec neque varius viverra. Morbi laoreet diam nibh, eget elementum tortor sagittis sed. Sed mattis imperdiet odio, molestie egestas augue imperdiet a. In hac habitasse platea dictumst.
Donec sed ipsum vitae lorem cursus sollicitudin. Integer condimentum nunc in erat euismod luctus. Sed ac aliquam massa. Phasellus ultricies libero a interdum efficitur. Ut laoreet nisi risus, non molestie tortor faucibus a. Cras blandit nisi vitae odio bibendum, sed aliquet risus mollis. Aenean eu rhoncus libero, id lobortis sapien.
Donec vehicula luctus ante, ut consectetur nisi blandit non. Sed vel laoreet ex. Phasellus venenatis tellus at nulla auctor varius. Nulla eleifend iaculis ex sed sollicitudin. Etiam a fringilla ipsum. Aenean commodo consectetur nibh eu cursus. Integer viverra venenatis neque, quis sodales massa hendrerit nec. Etiam cursus ex metus, eget aliquet magna tincidunt nec.
Duis sed lectus ac nulla consequat semper vel et erat. Duis varius dictum pharetra. Nulla venenatis massa id ante efficitur, sit amet cursus risus tempus. Nulla ut efficitur ante. Morbi semper mi vel nisl consequat ullamcorper. Quisque felis nulla, sodales vitae elit in, mattis tempus metus. Donec neque turpis, vulputate sed hendrerit vitae, luctus eu lacus. In ullamcorper nunc dolor, in porta nibh aliquam feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
</div>Чтобы цепочка прокрутки не распространялась за пределы прокручиваемого элемента, необходимо добавить свойство overscroll-behavior со значением none:
.scroll_chaining-none {
overscroll-behavior: none;
overflow: auto; float: left;
height: 100vh; width: 80%;
box-shadow: 0 0 0 2px red;
}<div class="scroll_chaining-none">
<div class="scroll_chaining-none">
<div class="scroll_chaining-none">
Donec vehicula luctus ante, ut consectetur nisi blandit non. Sed vel laoreet ex. Phasellus venenatis tellus at nulla auctor varius. Nulla eleifend iaculis ex sed sollicitudin. Etiam a fringilla ipsum. Aenean commodo consectetur nibh eu cursus. Integer viverra venenatis neque, quis sodales massa hendrerit nec. Etiam cursus ex metus, eget aliquet magna tincidunt nec. Duis sed lectus ac nulla consequat semper vel et erat. Duis varius dictum pharetra. Nulla venenatis massa id ante efficitur, sit amet cursus risus tempus. Nulla ut efficitur ante. Morbi semper mi vel nisl consequat ullamcorper. Quisque felis nulla, sodales vitae elit in, mattis tempus metus. Donec neque turpis, vulputate sed hendrerit vitae, luctus eu lacus. In ullamcorper nunc dolor, in porta nibh aliquam feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</div>
Morbi mattis nisi nec mauris tincidunt faucibus. Ut porta ipsum lorem. Praesent a dapibus arcu, ac sagittis nunc. Nulla interdum urna nunc. Pellentesque placerat orci augue, sodales viverra libero fermentum ac. Phasellus id ante nec neque varius viverra. Morbi laoreet diam nibh, eget elementum tortor sagittis sed. Sed mattis imperdiet odio, molestie egestas augue imperdiet a. In hac habitasse platea dictumst. Donec sed ipsum vitae lorem cursus sollicitudin. Integer condimentum nunc in erat euismod luctus. Sed ac aliquam massa. Phasellus ultricies libero a interdum efficitur. Ut laoreet nisi risus, non molestie tortor faucibus a. Cras blandit nisi vitae odio bibendum, sed aliquet risus mollis. Aenean eu rhoncus libero, id lobortis sapien.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et metus ac est malesuada fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam massa, viverra in velit ut, condimentum ullamcorper eros. Etiam tincidunt augue turpis, et lacinia velit malesuada eleifend. Ut congue tristique libero at varius. Cras malesuada ac libero nec lobortis. Mauris tincidunt lectus quis justo tempus, in mattis massa rhoncus. Donec rhoncus in sem id auctor. Praesent in pellentesque felis, in egestas ipsum. Proin ornare turpis fermentum laoreet pharetra. In sed nulla diam. Fusce nulla libero, ullamcorper vitae eros consectetur, pellentesque tristique est.
</div>Для различных эффектов при жестах на мобильных устройствах, возможно будет полезнее значение contain.