Горизонтальная прокрутка окна до элемента на устройствах и на рабочем столе
У меня есть веб-сайт с горизонтальной прокруткой, так как страница шире, чем область просмотра. У меня также есть фиксированное меню, и когда пользователь щелкает ссылку в меню, окно должно прокручиваться до определенного элемента, такого как код ниже.
Это отлично работает на рабочем столе, но на устройствах левое значение не совпадает, поэтому оно не будет прокручиваться до нужной позиции. Как рассчитать правое левое значение, чтобы оно работало на всех устройствах?
$('.link').bind('click', function () {
window.scrollTo({
top: null,
left: 2600,
behavior: 'smooth'
});
});
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете рассчитать значение для динамической прокрутки, получив offset().left целевого элемента.
Также обратите внимание, что bind() устарела длинная время назад, и вы не должны его использовать. Вместо этого используйте либо click(), либо on(). Я также предлагаю проверить версию jQuery, которую вы используете. Если он старше 1.12.1, вам обязательно нужно обновить его.
Вот пример всего вышеперечисленного:
$('.link').on('click', function () {
window.scrollTo({
left: $('#yourTargetElement').offset().left,
behavior: 'smooth'
});
});
Хорошо - это зависит от того, как структурированы ваши HTML и CSS. Попробуйте вместо этого использовать position().left
Это даст мне значение 0:/
В этом случае, пожалуйста, добавьте свой HTML и CSS к вопросу. Трудно отлаживать то, что вы нам не показали
Спасибо за ваш ответ, Рори, удалось решить эту проблему с помощью некоторых вычислений проверки максимального значения прокрутки страницы и значения scrollLeft с помощью $('body, html').scrollLeft(), когда элемент находился в середине экрана на рабочем столе. Это дало мне ценность, которую я тогда мог использовать.
Это дает мне другое значение каждый раз, когда я нажимаю, в зависимости от того, какое положение прокрутки у меня есть в это время.