Прокрутка содержимого элемента без JavaScript

Question

Дорогие все, есть ли способ прокрутки, как при относительном смещении содержимого элемента без с использованием javascript и только с использованием CSS?

Если это имеет значение, элементв данном вопросе есть переполнение: скрытое и пробел: теперь можно скрыть некоторые части своего содержимого.Элемент обычно прокручивается с помощью javascript, но его необходимо правильно сместить при первоначальном рендеринге (и, конечно, без дополнительной интерактивной прокрутки), если javascript отключен.

Answer 1

Нет, нет возможности прокручивать элементы на странице (если это не iframe с включенной в него хэш-частью URL-адреса, и в этом случае браузер будет контролировать начальное расположение прокрутки, а не css или html), используя только CSS и HTML.

Answer 2

Нет. Не с CSS напрямую.

Вы можете смоделировать его, обернув содержимое элементом div и присвоив ему значение margin-top для требуемой суммы прокрутки.

( не забудьте удалить его / установить 0 с помощью javascript, когда он включен )

обновление
Классная идея - это то, что Джейми упоминает в своем ответе 1014 *, если оно соответствует вашим требованиям.

---

обновление 2

Вот еще одно решение, которое я создал на основе идеи Джейми, которое не нуждается в кадрах.

Поместите якорь <a name="anchor_name">..</a> в нужное место прокрутки и используйте

<meta http-equiv="refresh" content="2;url=#anchor_name_here">

для автопрокрутки там. ( метаэлемент должен идти в голове, хотя для (x) соответствия html )

пример на http://www.jsfiddle.net/gaby/f3CVY/5/

прекрасно работает во всех браузерах, которые я тестировал ( IE, Chrome, FF, Opera, Safari )

Answer 3

Существует также другой метод - довольно хакерский - но он работает без перезагрузки.

Решение, которое я создал, работает в следующих браузерах:

• Firefox 4 +
• Safari 5+
• Chrome 6+
• Опера 11+
• IE 10+
• Android 2.3 +

Это действительно немного глупо, так что посмотрим, будете ли вы использовать его или нет. :)

Небольшое объяснение

Я использовал атрибут HTML5 autofocs в поле <input>. Поскольку это будет фокусировать ввод, оно должно попасть в окно просмотра. Для этого он перейдет к заданной позиции. Чтобы избавиться от выделенного контура и вообще не видеть ввод, необходимо установить несколько стилей. Но это по-прежнему заставляло Safari иметь один мигающий пиксель, поэтому я справился с диапазоном, который действует как наложение. Обратите внимание, что вы не можете просто использовать display: none, так как это не вызовет автофокус (проверено только в Safari).

Демо

Попробуйте перед покупкой

Демонстрация будет работать только в Safari и Chrome. IE и Firefox не запускают автофокус в <iframe>.

CSS

div.outer {
    height: 100px;
    width: 100px;
    overflow: auto;
}

div.inner {
    position: relative;
    height: 500px;
    width: 500px;
}

div.inner > input {
    width: 1px;
    height:1px;
    position: absolute;
    z-index: 0;
    top: 300px;
    left: 200px;
    border:0;
    outline:0;
}

div.inner > span {
    width: 1px;
    height:1px;
    position: absolute;
    z-index: 1;
    top: 300px;
    left: 200px;
    background: white;
}

HTML

<div class="outer">  
    <div class="inner">
        <input type="text" autofocus></input>
        <span></span>
    </div>
</div>