Хромированные свитки слишком сильно, когда в верхней части окна просмотра есть фиксированное разделение

Question

Я вернулся.

Когда в верхней части окна просмотра есть фиксированное подразделение, Chrome слишком много прокручивает.

Я создал страницу, которая позволит вам указать, как прокручивается ваш браузер, и если у вас есть Chrome, вы можете увидеть, как Chrome падает на его лицо.

демонстрационной AT http://thetesting.site/fixednav/scrolling.html

Есть инструкции относительно того, как использовать страницу и как воспроизвести проблему Chrome на самой странице.

Я был ошибочен за то, что не предоставил код страницы - вот и все - нет конкретной части HTML и CSS, на которые мне нужна помощь. Вы должны посмотреть всю страницу.

Я не знаю, может ли выполняться фрагмент - никогда раньше не отправлял фрагменты. Просто зайдите на страницу и используйте ее.

function resize() { 
 
\t // Get the height of the fixed-header. parseInt used to strip off the px in the value 
 
\t fixedHeight = parseInt(document.getElementById("topfixed").offsetHeight, 10); 
 
\t 
 
\t // Set the height of the fixed, scrolling, instructions division to the viewport height minus the 
 
\t // height of the fixed-header and 20px "slop space" 
 
\t document.getElementById('instructions').style.height = (parseInt(window.innerHeight, 10) 
 
\t \t - fixedHeight - 20) + "px"; 
 
} 
 

 
gblLastButtonClicked = 0; // Yes, I'm using a global variable - did so because this is down and dirty. 
 

 
function buttonclick(button) { 
 
\t // Set the height of the fixed-header from the value of the button just clicked. Values are 0px, 
 
\t // 10px, 20px....80px 
 
\t document.getElementById("topfixed").style.height = button.value; 
 
\t 
 
\t // Display the height in the button bar 
 
\t document.getElementById("heighttext").innerHTML = "Height is " + button.value + " "; 
 
\t 
 
\t // Set the body margin-top to the height of the fixed-header (as gotten from value of the clicked button) 
 
\t document.getElementById("body").style.marginTop = button.value; 
 
\t 
 
\t // Set the top of the Instructions division to the height of the fixed-header (from button.value) 
 
\t document.getElementById("instructions").style.marginTop = button.value; 
 

 
\t // Set the top of the buttonbar division to the height of the fixed-header (from button.value) 
 
\t document.getElementById("buttonBar").style.marginTop = button.value; 
 

 
\t // Set the previously clicked button's text to blank 
 
\t document.getElementById("button" + gblLastButtonClicked).style.color = "black"; 
 
\t 
 
\t // Set the previously clicked button's font-weight to normal 
 
\t document.getElementById("button" + gblLastButtonClicked).style.fontWeight = "normal"; 
 
\t 
 
\t // Set the last button clicked global variable. 
 
\t gblLastButtonClicked = parseInt(button.value, 10); 
 
\t 
 
\t // Set the text color of the button just clicked to red 
 
\t button.style.color = "red"; 
 
\t 
 
\t // Set the font-weight of the button just clicked to bod 
 
\t button.style.fontWeight = "bold"; 
 
\t 
 
\t // Call the resize function (defined above) to resize the fixed instuctions division 
 
\t resize(); 
 
\t 
 
\t // Set the focus to the body of the page. It will be on the button just clicked and setting it to the 
 
\t // body allows the use of the pagedown key without clicking on a part of the body - I've seen 
 
\t // some browsers which keep the focus on the button and, as a result, pagedown does not scrol the page \t 
 
\t document.getElementById("content").focus(); 
 
\t 
 
\t // Scroll the page to the top. We do this so the testing always starts at the same point and to save 
 
\t // the user from having to do so. 
 
\t window.scrollTo(0, 0); 
 
\t 
 
} 
 

 
function fillPage() { // this function writes 150 lines of text into the body 
 
\t for (i = 1; i < 151; i++) { 
 
\t \t document.writeln("********************** Line #" + i + "<BR>"); 
 
\t } 
 
}

\t .button { 
 
\t \t width: 50px; 
 
\t \t font-size: 12px; 
 
\t } 
 
\t .instructions { 
 
\t \t position: fixed ; 
 
\t \t z-index: 10; 
 
\t \t width: 40%; 
 
\t \t overflow: auto; 
 
\t \t font-size: 15px; 
 
\t \t height:500px; 
 
\t \t left: 57%; 
 
\t \t background-color: lightblue; 
 
\t \t color: black; 
 
\t \t padding: 5px; 
 
\t \t border: 2px black solid; 
 
\t \t top: 0px; 
 
\t } 
 
\t .topfixed { 
 
\t \t background-color: yellow; 
 
\t \t opacity: .8; 
 
\t \t z-index: 1; 
 
\t \t position: fixed; 
 
\t \t left: 0; 
 
\t \t top: 0; 
 
\t \t width: 100%; 
 
\t \t height: 0px; \t 
 
\t \t color: red; 
 
\t \t font-weight: bold; 
 
\t } 
 
\t .buttonBar { 
 
\t \t position: fixed; 
 
\t \t left: 0px; 
 
\t \t padding-bottom: 10px; 
 
\t \t background-color: green; 
 
\t \t width: 100px; 
 
\t \t text-align: center; 
 
\t \t z-index: 10; 
 
\t \t top: 0px; 
 
\t } 
 
\t .content { 
 
\t \t width: 80%; 
 
\t \t margin: 25px auto; 
 
\t \t margin-top: 0px; 
 
\t }

function resize() { 
 
\t // Get the height of the fixed-header. parseInt used to strip off the px in the value 
 
\t fixedHeight = parseInt(document.getElementById("topfixed").offsetHeight, 10); 
 
\t 
 
\t // Set the height of the fixed, scrolling, instructions division to the viewport height minus the 
 
\t // height of the fixed-header and 20px "slop space" 
 
\t document.getElementById('instructions').style.height = (parseInt(window.innerHeight, 10) 
 
\t \t - fixedHeight - 20) + "px"; 
 
} 
 

 
gblLastButtonClicked = 0; // Yes, I'm using a global variable - did so because this is down and dirty. 
 

 
function buttonclick(button) { 
 
\t // Set the height of the fixed-header from the value of the button just clicked. Values are 0px, 
 
\t // 10px, 20px....80px 
 
\t document.getElementById("topfixed").style.height = button.value; 
 
\t 
 
\t // Display the height in the button bar 
 
\t document.getElementById("heighttext").innerHTML = "Height is " + button.value + " "; 
 
\t 
 
\t // Set the body margin-top to the height of the fixed-header (as gotten from value of the clicked button) 
 
\t document.getElementById("body").style.marginTop = button.value; 
 
\t 
 
\t // Set the top of the Instructions division to the height of the fixed-header (from button.value) 
 
\t document.getElementById("instructions").style.marginTop = button.value; 
 

 
\t // Set the top of the buttonbar division to the height of the fixed-header (from button.value) 
 
\t document.getElementById("buttonBar").style.marginTop = button.value; 
 

 
\t // Set the previously clicked button's text to blank 
 
\t document.getElementById("button" + gblLastButtonClicked).style.color = "black"; 
 
\t 
 
\t // Set the previously clicked button's font-weight to normal 
 
\t document.getElementById("button" + gblLastButtonClicked).style.fontWeight = "normal"; 
 
\t 
 
\t // Set the last button clicked global variable. 
 
\t gblLastButtonClicked = parseInt(button.value, 10); 
 
\t 
 
\t // Set the text color of the button just clicked to red 
 
\t button.style.color = "red"; 
 
\t 
 
\t // Set the font-weight of the button just clicked to bod 
 
\t button.style.fontWeight = "bold"; 
 
\t 
 
\t // Call the resize function (defined above) to resize the fixed instuctions division 
 
\t resize(); 
 
\t 
 
\t // Set the focus to the body of the page. It will be on the button just clicked and setting it to the 
 
\t // body allows the use of the pagedown key without clicking on a part of the body - I've seen 
 
\t // some browsers which keep the focus on the button and, as a result, pagedown does not scrol the page \t 
 
\t document.getElementById("content").focus(); 
 
\t 
 
\t // Scroll the page to the top. We do this so the testing always starts at the same point and to save 
 
\t // the user from having to do so. 
 
\t window.scrollTo(0, 0); 
 
\t 
 
} 
 

 
function fillPage() { // this function writes 150 lines of text into the body 
 
\t for (i = 1; i < 151; i++) { 
 
\t \t document.writeln("********************** Line #" + i + "<BR>"); 
 
\t } 
 
}

Ну, взять взглянуть на него и посмотреть, что вы думаете

Я только испытанный с Chrome и Firefox. Если у вас установлены другие браузеры, попробуйте страницу и дайте мне знать результаты.

На странице имеются полные инструкции.

EDIT - вот page with screen captures демонстрационной страницы

EDIT - я создал версию демо-страницу, которая имеет работу вокруг для Chrome - для Chrome я расфиксировать эту стационарную-заголовок. Я не могу опубликовать другую ссылку - я ограничена двумя - но есть ссылка на измененную страницу на исходной демонстрационной странице.

EDIT. Прошло семь часов с тех пор, как я опубликовал URL-адрес страницы с отображением экрана, показывающим, как он работает и как я ожидаю, что он будет работать, и 23 часа с тех пор, как я разместил вопрос.

Должен ли я предполагать, что у этого есть все в тупике?

Кто-нибудь пробовал это с браузерами, отличными от Firefox и Chrome? Если да, то каковы были результаты - в каком браузере вы пытались работать и как работать с Firefox или Chrome?

Я хочу, чтобы открыть сообщение об ошибке с Я хотел бы сначала выяснить, если он ведет себя так же, как с Chrome с более высоким разрешением экрана, чем 1024 х 600.

Кто-нибудь пробовал это на экране с разрешением выше 1024 x 600 с Chrome? Если да, то каковы были результаты? Работает ли он так же с Chrome с более высоким разрешением, как и с разрешением 1024 x 600, или работает он по-другому?

Должен ли я опубликовать шаг за шагом на скрипте времени для тестирования этого? Должен ли я указывать его шаг за шагом для Chrome и Firefox с помощью разных кнопок высоты?

EDIT - последний.

Хорошо, я полагаю, что ни у кого нет идей, чтобы заставить его работать с Chrome, или никто не хочет даже читать вопрос - большинство «взглядов», вероятно, являются моими проверками, чтобы увидеть, что есть активность.

Я сообщил об этом как об ошибке Chrome и буду ждать, чтобы узнать, что из этого получилось. Кто-нибудь действительно отправился на демонстрационную страницу и попробовал ее с помощью IE или другого браузера, кроме Chrome или Firefox?

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

Answer 1

Я закрываю это - мой «ответ» заключается в том, что есть проблема, которая должна быть решена. Я отправил отчет об ошибках людям в Chrome, и я собираю гораздо больше документации, чтобы помочь им в оценке проблемы.

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

Как я уже сказал, я использую резервную систему с экраном с относительно низким разрешением, и проблема может быть связана с некоторой комбинацией вещей, характерных для этой системы, - но, опять же, у меня нет никаких подробных обратная связь с кем-либо относительно результатов любого проведенного ими тестирования.

Проблема заключается в том, что если в верхней части окна просмотра есть фиксированное разделение, в зависимости от высоты фиксированного деления Chrome прокручивает одну или несколько следующих строк на следующей «странице», под «фиксированным делением», когда вы «переходите вниз». Обратное происходит, когда вы: «вверх», за исключением того, что линии «прокручиваются» в нижней части окна просмотра. Я называю это «потеряющими линиями».

Один человек сказал, что это не важно, что фиксированные подразделения переполняются, короче говоря, вы не должны этого делать, и это не ошибка. Они сказали, что это то, что вы можете «исправить» кодом, что это было неважно и сортировка как курица и яйцо - я не совсем понимаю это.

Комментарии были больше в духе защиты проблемы, а не обсуждения ее или обмена результатами тестирования.

Я столкнулся с этой ошибкой на страницах Yahoo, и пока никто не совершенен - ​​даже я - Yahoo имеет хорошую репутацию для веб-дизайна и функций, и, тем не менее, они используют фиксированные подразделения - они комментируют ошибку в что фиксированное разделение на их страницах? Они грешат?

Если мысль состоит в том, что фиксированное разделение занимает ценное пространство экрана, то, учитывая физический размер и разрешение новых экранов, это вряд ли учитывается. Конечно, вы можете это сделать, но бывают случаи, если не так много раз, когда вы хотите сохранить элементы управления в верхней части окна просмотра.

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

Многие страницы теперь делают это, и люди хотят его дублировать. Я видел много вопросов о том, как «плавать панель, а затем фиксировать ее при необходимости» здесь, на StackOverFlow.

В первый раз, когда я столкнулся с таким баром, я подумал: «О, это мило, но что еще не значит показать« эй, посмотри, что я могу сделать?"

Как и любой инструмент или объект, вы можете использовать фиксированные подразделения или использовать их плохо. Независимо от того, отделяет ли компьютер от профессионалов от« немытых масс ». :-)

Просто чтобы разбудить вещи - вспомните кадры? Как они считаются неотъемлемо злыми? Они не злые, у них просто есть пара проблем, которые вызвали проблемы. Самым цитируемым является то, что при закладке «страницы» у вас действительно есть закладка для набора фреймов, а не контента. Существует очень простой способ исправить это - очень просто - и это не должно мешать кому-либо использовать фреймы.

Вы выбираете то, что считаете лучшим инструментом для работы, и если у него есть ограничения, вы либо обходите их, либо достигаете другого инструмента.

Последнее, и я закрою это.

Я обсуждал компьютеры с нетехническим человеком, и я искал способ объяснить, что компьютерное программирование влечет за собой далеко - FAR - больше, чем просто изучение языка программирования, и я придумал лучшую аналогию, о которой я думал до сих пор.

У вас есть три человека. Один из них - испанский, один - русский, один - американский, и все они три свободно владеют родными языками. Каждый из этих людей стремится стать автором.

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

Таким образом, это компьютерное программирование и все вспомогательные процессы, которые он влечет за собой.