Можно ли принудительно установить положение полосы прокрутки? - PullRequest
Новая
       31

Можно ли принудительно установить положение полосы прокрутки?

1 голос
/ 04 марта 2020

Могу ли я заставить полосу прокрутки страницы HTML вернуться в положение, где она не касается ни верхнего, ни нижнего полей?

Ответы [ 2 ]

0 голосов
/ 04 марта 2020

Зависит от размера вашей страницы. Если он не больше, чем область просмотра, то это невозможно. Если он больше, то вы можете достичь своей цели с помощью этого кода: 

function goto(y) {
    var x = window.scrollX;
    window.scrollTo({
        top: y,
        left: x,
        behavior: 'smooth'
    });
}

function resolveWindow() {
    if (window.scrollY < 100) goto(100);
    else if (window.scrollY > document.body.clientHeight - window.innerHeight - 100) goto(document.body.clientHeight - window.innerHeight - 100);
}

window.addEventListener('scroll', function(e) {
    resolveWindow();
});

resolveWindow();

goto

просто перемещается вертикально в позицию, полученную в качестве параметра, оставляя горизонтальную позицию неизменной.

resolWindow

Проверяет, находится ли позиция прокрутки выше, чем первые 100 пикселей по вертикали, и если да, то перемещается вниз.

Проверяет, находитесь ли вы ниже нижних 100 пикселей.

Alarm : если ваша страница меньше, чем область просмотра, это может привести к бесконечному l oop, поэтому вы можете захотеть обернуть условное выражение вокруг этого, например 

if (100 < document.body.clientHeight - window.innerHeight - 100) {
    //Your code
}

Примечание: вместо 100 вы можете использовать любые ограничения.

прослушиватель событий

Это предотвращает ситуацию, которую вы хотите предотвратить.

resolWindow call

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

0 голосов
/ 04 марта 2020

Вы можете использовать ссылку перехода и некоторый скрипт, чтобы переместить пользователя в середину страницы, где бы полоса прокрутки не была ни вверху, ни внизу.

ваша ссылка перехода выглядит следующим образом 

<a href="#div_id">jump link examplet</a>

Затем сделайте 

<div id="div_id"></div>

, нажав на эту ссылку, и вы перейдете к ссылке перехода для этого div, вы можете выполнить скрипт там по месту нахождения документа или jquery et c ..

...