在聚焦输入时，在iOS（和所有移动设备）上自定义滚动

The problem:

When the input is selected I want the screen to scroll so that the focused input is right at the top of the screen.

当选择输入时,我希望屏幕滚动,以便聚焦输入正好在屏幕顶部。

I want this to work on iOS and all other mobile devices.

我希望这适用于iOS和所有其他移动设备。

This is what happens currently on iOS:

This is what I want to happen... Notice where the page scrolls to:

The code I'm currently trying out is:

$('#input').on('focus focusin', function(e) {
    e.preventDefault();
    $('html').animate({
        scrollTop: $('#anchor').offset().top
    }, 300);
})

This code works great on desktop, but as soon as I load the page up on my iPhone, it stops working completely and the default scroll behaviour takes over—as seen in the first gif.

这段代码在桌面上运行良好,但是一旦我在iPhone上加载页面,它就会完全停止工作,并且默认的滚动行为会接管 - 如第一个gif中所示。

2 个解决方案

#1

So you just need it to scroll so the top of the input becomes the top of the screen?

所以你只需要它滚动所以输入的顶部成为屏幕的顶部?

I have added 2 pixels gap above the input so that you can see the border at the top of the input still.

我在输入上方添加了2个像素的间隙,这样您就可以看到输入顶部的边框了。

$('#input').on('focus', function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $(this).offset().top-2;
    }, 1000);
})

This is what happens currently on iOS:

This is what I want to happen... Notice where the page scrolls to:

The code I'm currently trying out is:

2 个解决方案

#1

更多相关文章

随机推荐