Блог

Главная - Вопросы по программированию - Как я могу scrollIntoView / focus без анимации плавной прокрутки? например, мгновенная фокусировка на элементе

Как я могу scrollIntoView / focus без анимации плавной прокрутки? например, мгновенная фокусировка на элементе

#javascript

Вопрос:

Я пробовал настраивать behavior: 'instant' scrollIntoView параметры, но это не сработало, а также preventScroll: false для focus параметров, но он по-прежнему плавно прокручивается, чтобы добраться до элемента

на этой странице https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus в последнем фрагменте кода он ведет себя так, как я хочу, он мгновенно фокусируется на элементе, без анимации прокрутки, но для меня он всегда прокручивается плавно, пока не достигнет элемента, как я могу отключить эту анимацию прокрутки?

 // Show next page
function showNextPage() {
    let currPage = parseInt(pageCounter.textContent);
    let target = document.querySelector(`[data-page="${currPage   1}"]`);
    target.focus({ preventScroll: false }); // DIDN"T WORK
}

// Show next page
function showNextPage() {
    let currPage = parseInt(pageCounter.textContent);
    let target = document.querySelector(`[data-page="${currPage   1}"]`);
    target.scrollIntoView({ behavior: 'instant' }); // DIDN"T WORK
}

Ответ №1:

scrollIntoView без параметра должна прокручиваться мгновенно.

 function showNextPage() {
    let currPage = parseInt(pageCounter.textContent);
    let target = document.querySelector(`[data-page="${currPage   1}"]`);
    target.scrollIntoView();
}

Кроме того, вы должны удалить scroll-behavior: smooth , если они есть в CSS вашего элемента. Это также может привести к плавной прокрутке.

Комментарии:

1. Это должно быть, но в моем случае это не так, поэтому я добавил параметр поведения

2. @SMH у вас есть scroll-behavior: smooth CSS для элемента body? Если вы это сделаете, это также может привести к плавной прокрутке

3. У меня нет никакого поведения прокрутки в моем CSS, но я только что прокомментировал ссылку bootstrap, и похоже, что это исправлено: s, хотя мне нужен bootstrap, как я могу это отключить?

4. о, неважно, мне пришлось добавить !important в свое поведение прокрутки, чтобы переопределить его, теперь это исправлено

5. Отлично, тогда я обновлю свой ответ

Метки: ,