Как запретить скроллинг, если курсор вне блока?

vivlad

вот пример кода:
<div class="container1">
<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>
</div>
<div class="container2">
<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br><br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>
<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br><br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>
<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br><br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>
</div>
.container1 {
    width: 200px;
    float: left;
    height: 100px;
    border: 2px solid red;
    overflow-y: scroll;
    z-index: 100;
    position: fixed;
}
.container2{
    width: 200px;
    float: left;
    border: 2px solid green;
    z-index: 0;
    margin-top: 120px;
}
Когда я доскроллил красный блок до конца, начинается скролл зеленого блока. Как сделать так, чтобы когда курсор находится над красным блоком, скроллился только красный блок, а зеленый скроллился когда курсор вне красного блока?
2 ответа

vivlad

Весь секрет в "~" (тильде) только учтите, что такой манец отрабатывает только тогда - когда контейнеры между которыми стоит тильда - СОСЕДИ в смысле html если вы между ними что - то напишете - тильда не отработает
    <div class="container1">
...
</div>
<div class="container2">
...
</div>
    .container1 {
    width: 200px;
    float: left;
    height: 100px;
    border: 2px solid red;
    overflow: hidden;
    z-index: 100;
    position: fixed;
}
.container2{
    width: 200px;
    float: left;
    border: 2px solid green;
    z-index: 0;
    margin-top: 120px;
    overflow-y:scroll;
}
.container1:hover
{
        overflow-y: scroll;
}
.container1:hover ~ .container2
{
    overflow: hidden!important;
}
}


vivlad

Такой вариант почему-то в мозилле например не работает( Да и между блоками другие блоки есть