Как включить прокрутку по фиксированному элементу?

Question

У меня проблема с прокруткой по фиксированному элементу, он не работает на моем сайте. Но я видел, что такой проблемы нет в некоторых примерах прокрутки, таких как this one. Через некоторое время я нашел небольшую разницу - на моем сайте прокрутка страницы не на теге html, а на корневом теге приложения.

Здесь вы можете найти пример ситуации, которую у меня есть - вы не можете прокручивать красный блок http://jsbin.com/rutogosesa/edit?html,css,output, и вот пример, где вы можете прокручивать красный блок http://jsbin.com/munixamuqo/edit?html,css,output.

Мой вопрос: как разрешить прокрутку в первом примере. Я знаю, что могу подписаться на onwheel событие и перемещать полосу прокрутки в ручном режиме, но это выглядит странно, поскольку все браузеры имеют плавную прокрутку моей реализации, нарушат ее поведение, особенно для пользователей Mac. Может быть, есть и другие возможные решения?

Answer 1

Давайте рассмотрим следующие проблемы: если мышь превышает #inner, вы не можете использовать обычные методы (пробел, стрелки, трекпад, колесо), чтобы прокручивать #outer вверх и вниз.

Если вам нужно сохранить все, что у вас есть, обойдите это, добавив pointer-events: none к внутреннему элементу. (Обратите внимание, что это означает, что вы не сможете взаимодействовать с ним вообще, поэтому любые ссылки во внутреннем элементе не будут доступны для просмотра. Учитывая примеры, которые вы дали в своем вопросе, это не будет проблемой.)

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
html { 
 
    overflow: hidden; 
 
} 
 
#inner { 
 
    position: fixed; 
 
    background: red; 
 
    width: 200px; 
 
    height: 200px; 
 
    pointer-events: none; /* this is your fix. note it doesn't work in IE < 9 */ 
 
} 
 
#outer { 
 
    overflow-y: auto; /* I changed this from "scroll". that may have been an inappropriate change, but it seems like it's probably desirable - you don't want the scrollbar to show even if the window is tall enough that you can't scroll */ 
 
    background: blue; 
 
    height: 100%; 
 
} 
 
#push { 
 
    height: 2000px; 
 
}

<div id="outer"> 
 

 
    <p>top of #outer</p> 
 

 
    <div id="inner"> 
 
    #inner 
 
    </div> 
 

 
    <div id="push" /> 
 
</div>

Если вы можете уйти с изменением стилей ваших html «S, вы можете обойти это путем сбрасывания html {height: 100%; overflow: hidden}. Это решение не использует pointer-events: none, поэтому вы сможете взаимодействовать с внутренним элементом!

html { 
 
    margin: 0; /* dropped html {height: 100%; overflow: hidden} */ 
 
} 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
#inner { 
 
    position: fixed; 
 
    background: red; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
#outer { 
 
    overflow-y: auto; /* I changed this from "scroll". that may have been an inappropriate change, but it seems like it's probably desirable - you don't want the scrollbar to show even if the window is tall enough that you can't scroll */ 
 
    background: blue; 
 
    height: 100%; 
 
} 
 
#push { 
 
    height: 2000px; 
 
}

<div id="outer"> 
 

 
    <p>top of #outer</p> 
 

 
    <div id="inner"> 
 
    #inner 
 
    </div> 
 

 
    <div id="push"></div> 
 
</div>