写入输入或文本区域时保持滚动位置

Question

我的网站上有一个输入文字。

如果我将光标保持在输入字段中，那么我向下滚动我的网站并编写一个字符，滚动将自动显示在输入字段所在的顶部。

当我将一个字符写入输入文本字段时，我希望滚动不移动（保持scrollTop）。

我尝试了很多解决方案，但从未工作过。例如：

＆＃13;

＆＃13;

setInterval(function() {
    tempScrollTop = $(window).scrollTop(); 
},100)


$(document).on("keypress blur paste change",".wmd-input",function(){
    $(window).scrollTop(tempScrollTop);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" size="100" placeholder="write here when you are in bottom of page"/>
<div style="width:100%;height:2000px;background:red">
</div>

＆＃13;

＆＃13;

＆＃13;

即使setTimeout() keypress功能无法正常工作。

＆＃13;

＆＃13;

setInterval(function() {
    tempScrollTop = $(window).scrollTop(); 
},100)


$(document).on("keypress blur paste change",".wmd-input",function(){
  setTimeout(function() {  
      $(window).scrollTop(tempScrollTop);
  },1000)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" size="100" placeholder="write here when you are in bottom of page"/>
<div style="width:100%;height:2000px;background:red">
</div>

＆＃13;

＆＃13;

＆＃13;

非常感谢你的帮助！

Answer 1

我想这不会给你提供你正在寻找的完整解决方案（因为你仍然在滚动中跳转），但你可以使用以下代码将用户移回到旧位置之后< / strong>输入完成：

define("FACEBOOK_APP_ID","MY APP ID");
define("FACEBOOK_APP_SECRET","MY APP SECRET");
define("FACEBOOK_APP_TOKEN","MY PAGE ACCESS TOKEN");

define("FACEBOOK_SDK_V4_SRC_DIR",$_SERVER['DOCUMENT_ROOT'].'/socialmedia/Facebook/src/Facebook/');
require_once($_SERVER['DOCUMENT_ROOT'].'/socialmedia/Facebook/src/Facebook/autoload.php');

$fb = new Facebook\Facebook([
    'app_id' => FACEBOOK_APP_ID,
    'app_secret' => FACEBOOK_APP_SECRET,
    'default_graph_version' => 'v2.2',
]);

//Post property to Facebook
$linkData = [
     'link' => 'www.yoururl.com',
     'message' => 'test message'
];
$pageAccessToken = FACEBOOK_APP_TOKEN;

try {
    $response = $fb->post('/me/feed', $linkData, $pageAccessToken);
} catch(Facebook\Exceptions\FacebookResponseException $e) {
    echo 'Graph returned an error: '.$e->getMessage();
    exit;
} catch(Facebook\Exceptions\FacebookSDKException $e) {
    echo 'Facebook SDK returned an error: '.$e->getMessage();
    exit;
}
$graphNode = $response->getGraphNode();

echo '<pre>';
print_r($graphNode);
echo '</pre>';
exit;   

var lastScrollTop = 0;
var ignoreScroll = false;

$(document).on('scroll', function(e) {
  if (!ignoreScroll) {
    lastScrollTop = $(document).scrollTop();
  }
});
$(document).on("keydown",".wmd-input",function(e){
  ignoreScroll = true;
  $(document).scrollTop(lastScrollTop);
});
$(document).on("keyup",".wmd-input",function(e){
  ignoreScroll = false
  $(document).scrollTop(lastScrollTop);
});