CSS overflow-x: скрытые конфликты с браузером Ctrl+F горизонтальное перемещение за пределы экрана выделение слова

Конфликт CSS

html {overflow-x:hidden;}

с помощью
команды веб-браузера

Ctrl + F  or find() or keyword search


Проблемы:

Сайт представляет собой дизайн с горизонтальной прокруткой, который переходит к предыдущему (влево) или следующему (вправо) заданному ширине/шагу/разделу без видимой горизонтальной полосы прокрутки.

document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
    case 37:
        leftArrowPressed();
        window.location.href = '#one';
        break;
    case 39:
        rightArrowPressed();
        window.location.href = '#two';
        break;
}
};


Когда я вызываю Ctrl+F для поиска слов, страница не будет следовать за маркером вне экрана влево или вправо. За исключением случаев, когда Overflow-x: visible прокручивается только до слова, а не на всю ширину/шаг/раздел экрана, в котором находится это слово.

  • Overflow-x:hidden; удаляет из браузеров возможность горизонтальной прокрутки;
  • Overflow-x:visible; браузеры прокручиваются только до слова, а не до следующего раздела при горизонтальном переполнении;


Могу ли я использовать функцию выделения слов в браузере с помощью Ctrl+F на заданных шагах/разделах ширины?

Можно ли активировать нажатие клавиши, когда Ctrl+F выделяет слова перемещается за пределы экрана?

Можно ли зафиксировать координаты выделенного слова (x, y)?

Код функционального теста:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Alpha Test</title>

<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height:100%;
overflow-x:hidden;
}
body {
height:100%;
}
#wrap {
min-height:100%;
width:200%;
}
#one, #two {
width:50%;
float:left;
}
</style>

<script type="text/javascript">
document.onkeydown = function(evt) {
    evt = evt || window.event;
    switch (evt.keyCode) {
        case 37:
            window.location.href = '#one';
            break;
        case 39:
            window.location.href = '#two';
            break;
    }
};
</script>

</head>
<body>

<div id="wrap">

<div id="one">
<iframe id="frame" src="https://wiki.videolan.org/" frameborder="0" marginwidth="" width="100%" height="100%" align="bottom">Browser not compatible.</iframe>
<!END URL-iFrame></div>

<div id="two">
<iframe id="frame" src="http://imdb.com" frameborder="0" marginwidth="" width="100%" height="100%" align="bottom">Browser not compatible.</iframe>
<!END URL-iFrame></div>

</div>
</body>
</html>

javascript event-listener html css cross-browser
person Understood    schedule 08.11.2013    source источник
comment
Является ли переполнение видимым вариантом, если вы сможете исправить положение прокрутки?   -  person t.niese    schedule 08.11.2013
comment
@t.niese Да, если возможно, я хочу, чтобы это было удалено. Я могу покрыть его фиксированным div, если это необходимо.   -  person Understood    schedule 08.11.2013
comment
с помощью overflow: visible вы можете проверить, вызвано ли событие scroll, а затем проверить scrollLeft, имеет ли оно действительное значение, и если нет, исправьте его, чтобы страница была полностью видна. (Я не могу проверить себя прямо сейчас, но я бы попробовал)   -  person t.niese    schedule 08.11.2013

Ответы (1)


arrow_upward
2
arrow_downward

Overflow-x и overflow-y всегда имели проблемы, даже в новейших браузерах. Оба могут иметь «скрытый», «видимый» и «полосу прокрутки» («авто» — это только комбинация «видимого» и «полосы прокрутки»), что, таким образом, составляет 9 комбинаций.

Но на практике работают только 5 из них, отвечаю: даже в самом новом Хроме! И что еще хуже: есть разница между браузерами, которые 5 это...

Иногда (в зависимости от вашей реальной проблемы) возможен обходной путь, если вы комбинируете overflow-x, overflow-y и overflow. Иногда некоторые JS-обманки являются решением. Общего и красивого решения не существует.

ctrl/f, вероятно, не имеет прямого отношения к этому, это косвенная причина вашей проблемы, потому что тело вашей страницы, вероятно, будет изменено, когда появится виджет поиска браузера. Вероятно, вы могли бы воспроизвести эту проблему и с вертикальным изменением размера окна браузера.

person peterh    schedule 15.11.2013
comment
Можете ли вы уточнить, в чем заключаются проблемы и какие пять комбинаций работают? Спасибо! - person Neal Gokli; 15.11.2018
comment
@NealGokli Добро пожаловать на SE! Хм, это было 5 лет назад, и с тех пор я мало занимался css :-( - person peterh; 15.11.2018
comment
Спасибо, в любом случае! Вам повезло, что вы избегаете css :) - person Neal Gokli; 15.11.2018
comment
@NealGokli Css не так уж и плох! Такие крайние случаи в нем зло, их следует избегать и не исключать! - person peterh; 15.11.2018
comment
@NealGokli Напишите минимальный html на одну страницу и попробуйте в разных браузерах! Выучить позиционирование нужно только один раз, и после этого все будет в порядке. - person peterh; 15.11.2018
comment
Я не провожу так много времени в веб-сфере, поэтому не помню всех пограничных случаев, с которыми сталкиваюсь. И все сложные способы, которыми стили и атрибуты различных закрывающих тегов взаимодействуют друг с другом. И все способы, которыми браузеры не соответствуют требованиям. Я больше бэкэнд парень! На самом деле я больше общительный человек. Еще девять месяцев, и я отправлюсь в аспирантуру, чтобы стать психотерапевтом! - person Neal Gokli; 26.11.2018
comment
@NealGokli У вас, вероятно, будет хорошее представление о душе людей, которым необходимо решать практически неразрешимые проблемы в фиксированное время. :-) Мое предложение: не начинайте взламывать css, особенно js. Этого просто недостаточно. Даже не сегодня. Иметь макет страницы, который просто не требует таких трюков. Посмотрите, как просто и хорошо выглядит, например, SE. - person peterh; 27.11.2018
comment
Спасибо :) Да, я стараюсь делать вещи максимально простыми (иногда жертвуя временем разработки, но в конечном итоге это того стоит!) Я всегда упрощаю то, что унаследовал :( - person Neal Gokli; 27.11.2018