CSS: make overflow-x: скрытый по-настоящему скрытый?

У меня есть div, который имеет стиль overflow-x: hidden, но я нахожу, что, когда в нем есть более широкий div, содержащий текст, пользователь может по-прежнему перетаскивать бок с помощью мыши, чтобы просмотреть скрытый текст.

Я хотел бы предотвратить это и сделать текст действительно скрытым. Этот jsfiddle должен показать, что я имею в виду: http://jsfiddle.net/YzsGF/11/ или вот код:

<div id="outer">
   <div id="inner">
       How can I truly hide the text beyond the margin?
    </div>
</div>
#outer { 
    width: 150px; 
    height: 300px; 
    overflow-x: hidden;
    border: 1px solid black;
}
#inner { 
    width: 300px;
    overflow-x: hidden;
}

Есть ли способ, которым я могу запретить пользователю видеть скрытый текст?

UPDATE: мне нужно переполнение-y для работы: это нормально, что overflow-x - только CSS3. Это может помочь объяснить реальный сценарий:

У меня есть внутренний div фиксированной ширины, но неизвестной длины.
Когда он достаточно короткий, чтобы поместиться в внешний div без панели y-scrollbar, все будет хорошо.
Когда внутренний div становится достаточно длинным, чтобы внешний div нуждался в панели y-scrollbar, появляется один, но отсекает часть правого содержимого внутреннего div. Это также ОК (я упустил некоторое дополнение RH), но не совсем то, что пользователь может выбрать текст и перетащить его вбок, показывая пустое заполнение RH и скрывая часть текста на стороне LH.

Любые решения?

Ответы

Ответ 1

Вы можете использовать свойство CSS clip. Это позволит скопировать текст по желанию, не отображая ничего за пределами отсекающего прямоугольника, а также не позволит пользователю прокручиваться.

#inner { 
position:absolute;
clip:rect(0px,150px,150px,0px);
width: 300px;
}

Пример:

http://jsfiddle.net/DigitalBiscuits/YzsGF/18/

Примечание: вам нужно указать абсолютное позиционирование для этого свойства клипа для работы.

Подробнее здесь http://www.w3schools.com/cssref/pr_pos_clip.asp

Ответ 2

Я не уверен, нужна ли вам ось y внутреннего div для прокрутки, но если вы этого не сделаете, это должно соответствовать вашим потребностям:

#outer { 
    width: 150px; 
    height: 300px;
    overflow-x: hidden;
    border: 1px solid black;
}
#inner { 
    overflow: hidden;
    width: 100%;
}

Кажется, что переполнение и переполнение-x ведут себя иначе друг от друга. http://jsfiddle.net/G3T9w/5/

Ответ 3

overflow-x: hidden, в отличие от overflow: hidden не отключает прокрутку. Это просто заставляет содержимое обрезать и скрывать полосу прокрутки. Сам элемент по-прежнему прокручивается через javascript или, как вы обнаружили в некоторых сценариях выбора, где элемент автоматически прокручивается.

Нет никакого решения без JavaScript, а javascript все еще запутан, потому что onscroll не срабатывает, если полоса прокрутки не видна (то есть событие onscroll привязано к позиции изменения полосы прокрутки, а не фактическая прокрутка элемента).

Существуют различные способы обхода. Andrew Dunn решение размещения overflow:hidden на обертке, а установка обертки по ширине вашего контейнера - одна. Но это просто работает вокруг проблемы, не фиксирует актуальную проблему. Но если вы в порядке с этим, то это, вероятно, хороший выбор. Имейте в виду, что вам необходимо применить эту технику ко всем элементам контейнера, или вы можете столкнуться с той же проблемой.

Ответ 4

Предполагая, что упрощенный код HTML:

<html><body><div class=wrap>content...</div></body></html>

Установите оба тела, html в высоту: 100%;

body, html {height:100%;}

Поместите div внутри тела и установите его на всю высоту тела:

div.wrap {height:100%; overflow:hidden;}

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

Чтобы удалить панель прокрутки (визуально), вы также должны добавить:

body {overflow: hidden; }

Чтобы отключить прокрутку с помощью клавиш со стрелками на клавиатуре:

window.addEventListener("keydown", function(e) {
    // space, page up, page down and arrow keys:
    if([32, 33, 34, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);

Ответ 5

Самый простой ответ, который работает для меня, - добавить стиль CSS position: fixed; в тег <body>.