css абсолютное позиционирование скрытых полос прокрутки ... с изюминкой

Question

Я работаю над сайтом с минимальным разрешением 1024 X 768. Итак, у нас ширина около 970 пикселей. В дизайне появился интересный макет с центрированным сайтом с баннером, который на самом деле превышает эту ширину (если быть точным, 1288 пикселей), который будет хорошо смотреться пользователям с большим разрешением, но при 1024 выглядит хорошо.

Итак, чтобы не показывать полосы прокрутки для тех, кто на 1024, я разместил баннер абсолютно и использовал overflow-x: скрытый на теле. Это прекрасно работает во всех наших браузерах.

Теперь клиент вернулся и попросил предоставить полосы прокрутки для пользователей на 800 X 600 (да, это не цель), чтобы они могли видеть критическую кнопку входа в систему.

Как это можно сделать для этих 2% пользователей, не внося радикальных изменений? Все, что я могу придумать, это определить ширину их экрана и удалить overflow-x: hidden.

Вы должны любить, когда требования меняются в конце процесса сборки!

Редактировать - вот то, что у меня есть, что мне кажется достаточно простым - какие-нибудь предостережения здесь?

if (screen.width < 1024) {
    $("body").css("overflow-x", "visible");
}

Answer 1

Как насчет разбить баннер на три части.

1. Левая сторона превышает 800 пикселей.
2. Центр 800 пикселей.
3. Правая сторона за 800 пикселей.

Затем установите overflow-x: hidden; только для 1 и 3.

Таким образом, если обрезать центральные 800 пикселей, они получат полосу прокрутки. Если пользователь может видеть, скажем, 1100 пикселей, но не весь баннер, он не получит полосу прокрутки.

Answer 2

Вы можете использовать <div> с фоновым изображением для баннера вместо <img>:

<div style="background: url(/images/banner.jpg) no-repeat center top;"/>

<div> позаботится о проблемах обрезки, переполнения и изменения размера длявам и вам не понадобится куча overflow хаков.

Answer 3

Как на счет этого ( попробовать )?Последний селектор по крайней мере для минимальной совместимости с IE 6. Конечно, вы должны настроить / уменьшить минимальную ширину, указанную мной, чтобы она лучше всего работала с вашим макетом.

Answer 4

Я бы сказал, что ваша идея определить ширину экрана, а затем удалить overflow-x: скрытый, вероятно, лучше всего.Это должно быть довольно просто сделать с некоторым JavaScript.