Set scrollTop и scrollLeft без javascript

У меня есть вопрос о свойствах scrollTop и scrollLeft. Я хотел бы установить эти свойства в своем div без использования JavaScript (jquery). Это возможно? Моя проблема в том, что у меня есть программа, которая интерпретирует код HTML, а div, которые я прокрутил, имеет значение 0, когда программа интерпретирует код. Программа не может прочитать значение scrollTop или scrollLeft. Существует HTML-тег, например:

<div scrollLeft="300" scrollTop="200"></div>

ОТВЕТЫ

Ответ 1

Я боюсь, что это невозможно с использованием только CSS/HTML.

Изменить [05.01.2012] - Возможное решение

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

  • Firefox 4 +
  • Safari 5+
  • Chrome 6+
  • Opera 11+
  • IE 10+
  • Android 2.3 +

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

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

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

Demo

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

Демонстрация будет запущена только в 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>