scrollTop Сломанный: Высота тела 100%, перелива Авто

http://jsfiddle.net/o7z1pnfx/scrollTop Сломанный: Высота тела 100%, перелива Авто

Я работаю на веб-сайте со следующей планировкой:

<html> 
    <head></head> 
    <body> 
     <div id="left"></div> 
     <div id="main"></div> 
    </body> 
</html>

И следующий CSS:

* { 
    box-sizing:border-box; 
} 
html, 
body { 
    height:100%; 
    margin:0; 
    padding:0; 
} 
html { 
    overflow:hidden; 
} 
body { 
    overflow:auto; 
} 
#left, 
#main { 
    min-height:100%; 
    float:left; 
}

Остальная CSS не очень важно, но будьте уверены, что у меня есть поплавки, и т. д. Макет выглядит точно так, как я хочу.

Цель предоставленного CSS - сделать так, чтобы #left и #main были как минимум на высоте окна, но если они растут больше, страница будет расти с ней. Это работает по назначению.

Вопрос заключается в том, что мне нужно использовать позицию прокрутки Y в моей JavaScript в какой-то момент, но сочетание высоты: 100% и перелива: scrollTop свойство авто на теле вызывают тела, чтобы всегда быть 0.

Если у кого-то есть альтернатива JavaScript или небольшое изменение CSS, чтобы исправить это, это было бы здорово. Я предпочел бы избежать больших изменений CSS, но они все равно могут быть полезны.

Спасибо!

источник

2014-10-15 scwcompton

вы пробовали $ (окно) .scrollTop()? –

Нет - этот сайт не использует jquery. Изменить: я просто добавил jquery и протестировал его, и он тоже вернулся 0, несмотря на то, что я прокручивался по странице. – scwcompton

Можете ли вы разместить Javascript и создать скрипку с соответствующим кодом или где-нибудь, если мы увидим это поведение? –

Протестировано на Firefox, и это не проблема. Я считаю, что это ошибка в Chrome, и я сообщаю об этом как таковой. Не знаю обходного пути, сомнения существуют.

Редактировать: sigh, также кажется, проблема в Safari.

источник

2014-10-15 19:33:49 scwcompton

Это, скорее всего, ошибка самого движка Webkit. Вероятно, Opera 15+ будет иметь эту ошибку. –

Да, я пришел к такому же выводу. Я сообщил об ошибке Chromium и, по-видимому, исправление уже существует с версии 30, но по умолчанию оно не включено и может быть включено только через chrome: // flags – scwcompton

Это странно ... Чтобы сделать «простой» стандарт чтобы работать правильно, вам нужно редактировать определения? Ну, какой отличный браузер! ... –

Похоже, вы можете обойти эту ошибку, используя 100vh на элементах, которые вы хотите всегда быть высотой окна.

См. Измененный jsfiddle.

Единицы просмотра в сборе не идеальны, но похоже, что это будет работать в most modern browsers.

источник

2014-11-17 16:09:44 benjaminjosephw

На самом деле @scwcompton, ваш ответ ведет меня по правильному пути для прекрасного обходного пути. Случается, что веб-браузеры по какой-то причине не перекрашивают страницу.

Принуждение перевязки исправило проблему для меня. Я добавил следующий код прямо перед тем, как оживить тело элемента:

MLB.BODY = $("#body"); 
    MLB.BODY.css("display", "none"); 
    MLB.BODY.height(); // no need to store this anywhere, the reference is enough 
    MLB.BODY.css("display", ''); 


    MLB.BODY.scrollTop(99999);

источник

2015-07-23 14:11:13

Извините за моего покойного решение, но я просто encouter вопрос, как вы. Точка html-тега не любит никакого правила переполнения. Просто удалите любое переполнение из html и поместите его в корпус, и он работает

источник

2015-09-21 15:59:32

Использование только min-height не нарушает функции прокрутки. (только в Chrome). Кажется, что 100vh отлично работает.

body, html { 
    min-height: 100%; 
}

или

body, html { 
    min-height: 100vh; 
}

источник

2017-09-06 04:42:53

scrollTop Сломанный: Высота тела 100%, перелива Авто

ответ

Смежные вопросы