Question

我有一个网络应用程序。我正在尝试禁用/阻止当您专注于不同的表单输入时发生的滚动（即，当您通过表单中的输入元素前进时滚动）。

我已经禁用滚动：

 <script type="text/javascript">
     $(document).ready(function() {
         document.ontouchmove = function(e){
              e.preventDefault();
              }
     });
 </script>

要添加更多信息 - 我的页面包含一些“幻灯片”。每个都是768x1024，它们在页面上“堆叠”（即页面是768x3072 [1024 * 3 = 3072]），当你点击链接我正在使用scrollTo jquery插件滚动到下一个“幻灯片”和{{ 1}}在输入元素上。

有谁知道怎么做？

Answer 1

我发现在UIWebView中，document.body有时也会被移动。所以我用：

    input.onfocus = function () {
        window.scrollTo(0, 0);
        document.body.scrollTop = 0;
    }

Answer 2

哎呀，建议的window.scrollTo有点糟糕，让事情变得无法预测。

尝试这个更好的解决方案：

jQuery('body').bind('focusin focus', function(e){
  e.preventDefault();
})

或者，只需勾选您的输入：

jQuery('input.your-input-class').bind('focusin focus', function(e){
  e.preventDefault();
})

为什么呢？默认情况下，浏览器可以将焦点表单元素滚动到视图中“焦点”事件被触发（Firefox有一个错误，因此挂钩焦点）。所以，告诉他们不要明确地这样做。

顺便说一句，如果您的代码中focus触发了element.focus()事件，那么即使是解决方案也无法正常运行。

因此，解决方法是将focus触发器替换为select，即

element.select()

除了element.focus()

之外

如果您不喜欢element.select()方法，因为它将select输入元素中的文本，然后尝试创建输入元素文本的Range object并将其折叠你会的，抱歉没时间试试这个。

Answer 3

为了防止浏览器滚动到您移动焦点的元素，我使用jQuerys one事件监听器。在我将焦点移动到元素之前，我们将监听器添加到scroll事件和计数器滚动。事件监听器被jQuery删除。

var oldScroll = $(window).scrollTop();

$( window ).one('scroll', function() {
    $(window).scrollTop( oldScroll ); //disable scroll just once
});

$('.js-your-element').focus();

这种方式对我来说似乎很简单，有效，并且在我所做的所有测试中都很有效。

希望它有所帮助。

Answer 4

如果您不希望输入可编辑，则kpozin的答案可以正常工作。但是，只要您删除readonly属性onfocus或onclick，输入字段就会再次滚动焦点。

真正有用且无影响焦点或输入文字的能力是将onFocus="window.scrollTo(0, 0);"添加到输入元素。

当然，您必须保证屏幕键盘不会覆盖相关输入！

另见帖子：Preventing an <input> element from scrolling the screen on iPhone?

Answer 5

对此进行更新 - 我在几个不同的地方看到了window.scroll(0,0)解决方案，但它似乎只会让情况变得更糟。我的页面上有多个内嵌文本输入，因此当在它们之间移动焦点时，Safari中的自动向上和向下滚动使页面几乎无法使用，尤其是在横向方向上。

在iOS 8上打了一个星期之后，我发现这会停止滚动。这在将焦点从一个元素更改为另一个元素时起作用，因为您需要将onblur事件附加到某个元素：

var moveFocus = function (blurId, focusId) {
    var blurInput = document.getElementById(blurId);
    var focusInput = document.getElementById(focusId);
    if (blurInput && focusInput) {
        blurInput.onblur = function () {
            if (focusInput.setSelectionRange && focusInput.setSelectionRange()) {
                var len = focusInput.value.length;
                focusInput.setSelectionRange(len, len);
            }
            focusInput.focus();
        };
        focusInput.focus();
    };
};

Answer 6

尝试BLSully this answer。最初为所有输入元素提供readonly="readonly"属性。这将阻止Mobile Safari滚动到它。删除焦点上的属性，然后在每个元素的模糊上再次添加它。

Answer 7

这对我有用（使用jQuery）。它允许滚动，然后在您离开输入时将您返回到正确的位置。

    var saveScrollLeft;
    $("input, textarea")
        .focus(function () {
            clearTimeout(blurTimeoutId);
            saveScrollLeft = $("body").scrollLeft();
            })
        .blur(function () {
            // The user might be moving from one input to another, so we don't want to quickly scroll on blur.  Wait a second and see if they are off all inputs.
            blurTimeoutId = setTimeout(function () {
                $(window).scrollLeft(saveScrollLeft);
                }, 1000);
        });

Answer 8

所提供的解决方案都不适合我。由于抓取焦点的形式（以及滚动页面初始显示到所述形式）低于折叠，我只是在表单中添加了淡入。

所以我添加了一个名为fade-in的类名，其对应的css为display:none

使用jQuery我只需在文档就绪后执行jQuery(".fade-in").fadeIn();，问题就消失了。

这显然不仅限于使用jQuery。香草js可用于淡化。

Answer 9

如果您正在使用cordova开发移动网络应用程序，可以使用以下插件：

为我解决问题的插件是Telerik Keyboard Plugin。它使用的是基本的UIWebView。安装插件

cordova plugin add ionic-plugin-keyboard

在您的应用加载后调用此命令：

cordova.plugins.Keyboard.disableScroll(true);

如果您使用的是WKWebView，可以使用例如this plugin

Answer 10

要在没有滚动的情况下“聚焦”，可以使用solution2([[A,_]|T]):- member([A,_],T). solution2([[_,_]|T]):- solution2(T).。默认情况下，?- solution2([[1,1],[1,3],[2,3],[3,3]]). true false将选择输入中的所有文本。要模仿select的行为并在输入的末尾插入尖号，您可以使用：

select

Answer 11

无论出于何种原因，看来您都可以通过将关键帧动画应用于自动对焦的输入容器来减轻这种情况。

function App() {
  const [isSearching, setIsSearching] = useState(false);

  return (
    <FixedContainer>
      {isSearching && (
        <Box>
          <Input autoFocus type="text" placeholder="click me" onBlur={() => setIsSearching(false)} />
        </Box>
      )}
    </FixedContainer>
  )
}

const fadeInKeyframes = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`;

const Box = styled.div`
  animation-name: ${fadeInKeyframes};
  animation-duration: 0.1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
`;

https://stackblitz.com/edit/react-ios-input-scroll

工作示例：https://react-ios-input-scroll.stackblitz.io

Answer 12

如果您使用element.focus()，请将其更改为element.focus({ preventScroll: true })。

但是我不确定它是否可以在Safari上运行：https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus

更改焦点表单元素ipad Web应用程序时禁用滚动

12 个答案: