Проблема вкратце
У меня есть кусок рабочего двухмерного кода прокрутки. Прокрутка как таковая работает нормально. Прокрутка может быть сделана в любом направлении (не ограничиваясь только горизонтальной или только вертикальной в точке t, e), но есть две проблемы -
- Прокрутка за видимую область вверх и влево не возвращает назад прокручиваемую область.
- Прокрутка вправо и вниз отскакивает назад.
Демонстрация проблем - http://jsfiddle.net/sandeepan_nits/pAhjU/6/
Примечание - Тестирование только в браузерах webkit (Google chrome и Safari).
Решение, которое я ищу
- Либо укажите, что не так в моем коде.
- Или поделитесь любой правильно реализованной рабочей демонстрацией обоих способов прокрутки (горизонтальная + вертикальная), используя одну и ту же версию iscroll, чтобы я мог следовать одному и тому же. Я использую - версию 3.7.1, предпочтительно, или использую iscroll версии 4, также хорошо.
- Или любые указатели, конечно, будут оценены.
Описание проблемы
Пожалуйста, проверьте рабочий код здесь - http://jsfiddle.net/sandeepan_nits/pAhjU/6/
Примечание -
- Тестирование только в браузерах webkit (Google Chrome и Safari).
- Я сознательно поместил все в раздел HTML в jsfiddle, потому что, если я полностью разделяю вещи, прокрутка не работает, и я не уверен, где именно она перестает работать. Спасибо, если вы можете указать.
Код
Вот HTML -
<div class="header">
<div class='left_link'></div>Demo</div>
<div id="main_content" class="main_content">
<b><div id=scroller1><br/>
<div class='center_data'>Scrollable area</div>
<div class='center_data'>hello world!</div>
<br/>
</div></b>
</div>
Примечание - Я знаю, что там есть недопустимый html - <div id=scroller1> находится внутри <b></b>, и я не уверен, почему, если я удаляю теги <b></b>, горизонтальная прокрутка больше не работает - проверьте здесь .
Вот JS -
var myScroll;
var a = 0;
function loaded() {
//setHeight(); // Set the wrapper height. Not strictly needed, see setHeight() function below.
// Please note that the following is the only line needed by iScroll to work. Everything else here is to make this demo fancier.
myScroll = new iScroll('scroller1', {desktopCompatibility:true});
//myScroll2 = new iScroll('scroller2', {desktopCompatibility:true});
}
// Prevent the whole screen to scroll when dragging elements outside of the scroller (ie:header/footer).
// If you want to use iScroll in a portion of the screen and still be able to use the native scrolling, do *not* preventDefault on touchmove.
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);
Полагаю, причина в том, что прокручиваемый div по умолчанию отображается в правом нижнем углу прокручиваемой области. Но я не уверен в правильном способе настройки этих вещей - как указать, где отображать прокручиваемый div внутри области прокрутки. До сих пор я не нашел ни одной рабочей демонстрации прокрутки в обоих направлениях - горизонтальная + вертикальная прокрутка.
Я проверил документацию по iscroll и многим рабочим демонстрациям, но не нашел демонстрации, в которой прокрутку можно выполнять в обоих направлениях - как по горизонтали, так и по вертикали. Я проверил раздел «Допустимые параметры:» в разделе «Синтаксис» в http://cubiq.org/iscroll, но ни один из этих параметров не соответствует тому, что я ищу.
Другие вещи
Также, еще одна вещь, я не могу просмотреть область, покрытую элементами dom, в браузере Chrome, пока я проверяю данную демонстрацию прокрутки. Под областью я подразумеваю, что при наведении курсора мыши на панель инспектора dom выделяется dom в окне браузера. Когда это не появляется? Я проверил с проверенным HTML, как в http://jsfiddle.net/sandeepan_nits/pAhjU/12/.
Кто-нибудь, пожалуйста, создайте тег iscroll или iscroll3, чтобы я мог пометить свой вопрос.
Update
Я просто хочу иметь нормальную двухмерную прокрутку с областью прокрутки, находящейся должным образом внутри видимого экрана, и должен быть отскок назад при выходе за пределы экрана. Прямо сейчас нет прокрутки назад (в моем jsfiddle) при прокрутке к верхнему и левому внешнему экрану. Отскок происходит при прокрутке вправо и вниз. Я просто хочу, чтобы область прокрутки была хорошо размещена внутри экрана. Я думаю, что отскок будет автоматически исправлен.