Предотвращение переполнения в Internet Explorer 11

У меня есть сайт с <div>, который можно прокручивать по вертикали. Это хорошо работает. Я также скрываю полосу прокрутки, и это также хорошо работает. CSS по существу

.scrollable {
  overflow-y: scroll;
  -ms-overflow-style: none;
}

В настоящее время у меня проблема, с ним в Internet Explorer 11 и Windows 7 на дисплее с сенсорным экраном. Когда пользователь попадает в верхнюю часть нижней части прокрутки, окно отскакивает (т.е. Происходит перекос). Хотя это будет просто досадой для большинства пользователей, это работает в полноэкранном режиме в киоске, поэтому overscoll позволяет настольному компьютеру заглядывать (а не только в фоновый рисунок браузера).

Мне не удалось разобраться с решением. touch-action (префикс и не), например

html, body, .scrollable {
  -ms-touch-action: none;
  touch-action: none;
}

похоже, ничего не делает, и

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('MSPointerMove', function (e) { e.preventDefault(); }, false);

Этот jsBin показывает проблему.

Итак, каков правильный способ предотвращения переполнения в IE11/Windows 7.

Ответы

Ответ 1

Мышление вне поля (см. то, что я там сделал) дало бы родительский элемент - body, section или даже другой div цвет фона, смягчающий основную проблему на рабочем столе, показывающую через?

В противном случае посмотрите на

-ms-scroll-chaining: none;

из http://msdn.microsoft.com/en-us/library/ie/hh772034 (v = vs .85).aspx похоже, что это может решить вашу проблему, хотя я не могу проверить ее сам.

Ответ 2

Проблема может быть решена с помощью свойства word-wrap в css3.I также добавила overflow-x: hidden, чтобы быть уверенным.

.scrollable {
  overflow-y: scroll;
  -ms-overflow-style: none;
  word-wrap:break-word;
  overflow-x:hidden;
            }

Здесь вы можете узнать больше о word-wrap здесь - http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

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

Ответ 3

Я считаю, что исправил его, добавив следующее в ваш CSS:

body {
    overflow: hidden;
}

Вы можете увидеть результаты обновленный jsBin

Ответ 4

Попробуйте использовать:

.scrollable {
  overflow: auto;
  zoom: 1;
}

или

.scrollable {
  overflow: hidden;
  zoom: 1;
}

Ответ 5

Эффект отскока от прокрутки не ограничивается Internet Explorer 11 и может отображаться даже в простых приложениях, таких как Блокнот.

Чтобы отключить эффект, установите для следующего раздела реестра значение "0":

HKEY_CURRENT_USER\Software\Microsoft\Wisp\Touch\Bouncing

Ответ 6

Извините, что должен был протестировать перед отправкой ответа.

Я тестировал проблему jsbin и решил ее так. Назначьте эти стили классу scrollie:

.scrollie {
  max-height: 200px;
  width: 300px;
  overflow-y:scroll;
  word-wrap:break-word;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}