Здравствуйте~ Уважаемые зрители и господа, всем привет! Праздник Национального дня и Праздника середины осени подходит к концу, пришло время упаковать свое сердце (ти), любовь (чжун), учиться и усердно работать. На этот раз я познакомлю вас с двумя простыми в использовании API, которые на самом деле являются ленивыми артефактами.
согласно сMDNописание,Element.scrollIntoView()Метод прокручивает текущий элемент в видимую область окна браузера.
а такжеElement.scrollIntoViewIfNeeded（）Метод также используется для прокрутки элементов, которые не находятся в видимой области окна браузера, в видимую область окна браузера. Но если элемент уже находится в видимой области окна браузера, прокрутки не произойдет. Этот метод является проприетарным вариантом стандартного метода Element.scrollIntoView().
Таким образом, любая необходимость вернуться наверх, перейти в верхнюю позицию, и всплывающая клавиатура, чтобы заблокировать поле ввода, может быть легко решена.
Однако перед лицом простых в использовании API-интерфейсов первая реакция внешних интерфейсов — обратить внимание на совместимость!
Первый взглядscrollIntoViewиз:
Увидев кусочек желтого, желтого, зеленого и зеленого, вы можете чувствовать себя в принципе непринужденно.Единственное, что не поддерживается, это значение определенного атрибута.Введение будет ниже~
увидим позжеscrollIntoViewIfNeeded:
IEа такжеFireFoxвсе красное, еслиPCЕсли вы хотите использовать его, вы можете использовать его только для внутренних проектов, а жаль. Но мобильный терминал все еще зеленый, в основном все в порядке, вы можете использовать его со спокойной душой~
Поскольку эта статья является введением в ~, я немного рассказал о каждом атрибуте.demo, нажмите, чтобы испытать это!
scrollIntoView
Представить первымscrollIntoViewИспользуйте это на самом деле очень просто, после получения элемента, позвоните прямоscrollIntoViewIfNeeded()ОК, простоdemoпросто нажмите здесь, щелкните маленький зеленый блок сбоку, и страница прокрутится вверх.demoКод выглядит следующим образом:
<body>
<div class="chunk"></div>
<div class="btn">click</div>
<script>
const btn = document.querySelector('.btn');
const test = document.querySelector('.chunk');
btn.addEventListener('click', function() {
test.scrollIntoView();
})
</script>
</body>Разве это не очень просто~ Но у некоторых студентов могут возникнуть вопросы: Разве это не то же самое, что и позиционирование точки привязки? Это кажется бессмысленным! подожди, когда ты позвонишьscrollIntoViewНа самом деле, вы можете передавать в него параметры.scrollIntoViewПринимает только один параметр, но принимает два типа параметров, а именноBooleanпараметры типа иObjectпараметр типа.
во-первыхBooleanПараметры типа, как видно из названия, параметры могут сделатьtrueа такжеfalse. еслиtrue, верх элемента будет выровнен с верхом видимой области области прокрутки, в которой он находится. еслиfalse, нижняя часть элемента будет выровнена по нижней части видимой области области прокрутки, в которой он находится. простой примерможете нажать здесь. Основной код выглядит следующим образом:
<body>
<div class="chunk"></div>
<div class="btn-top">up</div>
<div class="btn-bottom">down</div>
<script>
const up = document.querySelector('.btn-top');
const down = document.querySelector('.btn-bottom');
const test = document.querySelector('.chunk');
up.addEventListener('click', function() {
test.scrollIntoView(true);
});
down.addEventListener('click', function() {
test.scrollIntoView(false);
});
</script>
</body>Как видите, когда входящие параметры соответственноtrueа такжеfalse, при нажатии кнопки справа загорается красныйdivЭто будет близко к верхней или нижней части видимой области.
С последующимObjectТип параметра, этот объект имеет два варианта, то есть в объектеkey.blockс предыдущимBooleanПараметр типа тот же, но значение больше неtrueа такжеfalse, более семантичноstartа такжеend.
Другой вариантbehavior, MDN дает три возможных значения, которыеauto,instantа такжеsmooth. Этот параметр определяет, как прокручивается страница, измеряемаяautoа такжеinstantВсе прыгают в соответствующую позицию мгновенно, проверьтеW3C后发现了这么一句:"The instant value of scroll-behavior was renamed to auto."。因而基本可以确定两者表现是一致的。 а такжеsmoothИдет процесс анимации.К сожалению, когда я упоминал о совместимости раньше, я сказал, что желтый не поддерживает определенный атрибут, то есть не поддерживает его.behaviorстоимостьsmooth. Более того, протестировав браузеры IE и мобильных UC, мы обнаружили, что они их вообще не поддерживают.Objectтип параметра, поэтому при вызовеscrollIntoView({...}), только результат по умолчанию, которыйscrollIntoView(true). простой примерСмотри сюда, если вы хотите испытатьsmoothДля эффекта вам нужно использовать Chrome или Firefox! Основной код выглядит следующим образом:
<body>
<div class="chunk"></div>
<div class="btn-top">up</div>
<div class="btn-bottom">down</div>
<script>
const up = document.querySelector('.btn-top');
const down = document.querySelector('.btn-bottom');
const test = document.querySelector('.chunk');
up.addEventListener('click', function() {
test.scrollIntoView({
block: 'start',
behavior: 'smooth'
});
});
down.addEventListener('click', function() {
test.scrollIntoView({
block: 'end',
behavior: 'smooth'
});
});
</script>
</body>scrollIntoViewIfNeeded
ВведениеscrollIntoView, пора представить его вариантыscrollIntoViewIfNeeded. Между ними есть два основных различия. прежде всегоscrollIntoViewIfNeededОн относительно ленив: если элемент находится в видимой области, страница не будет прокручиваться при его вызове. С последующимscrollIntoViewIfNeededТолькоBooleanТиповые параметры, то есть все они прокручиваются мгновенно, возможности анимации нет.
scrollIntoViewIfNeededможет принять одинBooleanпараметры типа иscrollIntoViewразные,trueпо умолчанию, но вместо прокрутки вверх элемент центрируется в видимой области;falseЭлементы могут быть выровнены сверху или снизу, в зависимости от того, с какой стороны элемент ближе. простой примерможете нажать здесь. Примерный код выглядит следующим образом:
<body>
<div class="chunk"></div>
<div class="scrollIntoView">scrollIntoView top</div>
<div class="scrollIntoViewIfNeeded-top">scrollIntoViewIfNeeded top</div>
<div class="scrollIntoViewIfNeeded-bottom">scrollIntoViewIfNeeded botom</div>
<script>
const scrollIntoView = document.querySelector('.scrollIntoView');
const scrollIntoViewIfNeededTop = document.querySelector('.scrollIntoViewIfNeeded-top');
const scrollIntoViewIfNeededBottom = document.querySelector('.scrollIntoViewIfNeeded-bottom');
const test = document.querySelector('.chunk');
scrollIntoView.addEventListener('click', function() {
test.scrollIntoView(true);
});
scrollIntoViewIfNeededTop.addEventListener('click', function() {
test.scrollIntoViewIfNeeded(true);
});
scrollIntoViewIfNeededBottom.addEventListener('click', function() {
test.scrollIntoViewIfNeeded(false);
});
</script>
</body>Как говорится в документации, когда красныйdivНаходясь полностью в зоне видимости, вызовитеscrollIntoView()происходит прокрутка при вызовеscrollIntoViewIfNeeded()не будет. И после того, как я попрактиковался, я нашел некоторые детали, которых не было в документации. Вызывается, когда элемент находится в видимой области, но не весь видимыйscrollIntoViewIfNeeded(), независимо от того, является ли параметрtrueещеfalse, происходит прокрутка, и эффект заключается в прокрутке до тех пор, пока элемент не выровняется с верхней или нижней частью видимой области, в зависимости от того, что ближе. Вам нужно обратить на это внимание~
резюме
На самом деле этот API не нужен, есть много других способов добиться его эффекта. Однако, если позволяют условия, его использование может сэкономить много денег.JSКод или куча анкоров — это все еще круто.
Спасибо, что читаете здесь~ Я надеюсь, что эта статья будет вам полезна, не забудьте использовать эти два API!