滚动到jQuery-Textarea的顶部 [英] Scroll to top of jQuery-Textarea

问题描述

我正在尝试向我的jQuery移动应用程序添加更改日志。如果出现错误，用户应该具备查看错误的能力。因此我实现了一个带有textarea的弹出窗口（见下面的代码）

I'm trying to add a "change log" to my jQuery mobile Application. In case of an error, the user should have the capability, to see what went wrong. Therefor I've implemented an popup, with a textarea (see code below)

        <!-- DIALOG Start-->
        <div data-role="popup" id="popupLog" data-overlay-theme="a" data-theme="b" style="max-width:400px;" class="ui-corner-all">
        <div data-role="header" data-theme="b" class="ui-corner-top">
        <h1>Logg-Einträge:</h1>
        </div>
        <div data-role="none" data-theme="b" class="ui-corner-bottom ui-content">
        <textarea style="height: 120px; max-height: 120px" readonly="readonly" data-mini="true" cols="40" rows="8" id="popupTextArea"></textarea>
        <a href="#" data-role="button" data-inline="true" id="btn_textArea" data-rel="back" data-theme="c">OK</a>    
        </div>
        </div>
        <!-- DIALOG End-->

这个popUp充满了数据，并在点击特定按钮时打开：

This popUp is filled with data, and opened when clicking a specific button:

$('#showLog').click(function() {
    $("#popupDialog").popup("close");
    // populate the textArea with the text
    $("#popupTextArea").text(sessionStorage.getItem("logStack"));
    // open popUp after a specific time
     setTimeout( function(){$('#popupLog').popup('open'); 
         }, 1000 );
});

到目前为止，所有功能都正常运行。问题是：当用户在textarea中向下滚动时，关闭popUp并重新打开它，滚动条的位置仍然相同 - 例如用户向下滚动到底部，关闭popUp并重新打开它 - popUp将位于textarea agein的底部。但是当我再次打开popUp时，我想总是把它放在textarea的顶端。为了实现这一点，我在这个popUp中实现了一个Ok-Button，如下所示，关闭popUp并将scrollingTop设置为0：

All functionality is working fine up to this point. The problem is: When the user scrolls down within the textarea, closes the popUp and re-open it, the position of the scroller is still the same - for example the user scrolls down to the bottom, closes the popUp and reopens it - the popUp will be at the bottom of the textarea agein. But i'd like to get allways the top of the textarea, when the popUp is opend again. For realizing this, I've implemented an "Ok"-Button in this popUp as follows, which closes the popUp and set the scrollingTop to 0:

$('#btn_textArea').click(function() {
// Setting position of the textArea to "0" -> But doesn't work.....
     $('#popupTextArea').scrollTop(0);
     );
});

我在这一点上很吵，因为textArea的外观仍然相同。我需要刷新还是什么？我将非常感谢每一个帮助....

I'm struggeling at this point, because the appearance of the textArea is still the same. Do I need a refresh or something? I would be very grateful for every help....

推荐答案

你可以使用 popupbeforeposition 操纵textarea的 scrollTop 属性的事件：

You could use the popupbeforeposition event to manipulate the scrollTop property of the textarea:

$(document).ready(function(){

    $("#exampleWindow").on("popupbeforeposition", function(evt, ui){

        $(this).find("textarea").scrollTop(0);

    });

});

这里有一个示例片段，测试关闭并在滚动后打开弹出窗口 textarea ：

Here you have a snippet with an example, test to close and open the popup after making scroll on the textarea:

$(document).ready(function() {

  $("#exampleWindow").on("popupbeforeposition", function(evt, ui) {
    $(this).find("textarea").scrollTop(0);
  });

});

textarea {
  max-height: 100px;
}

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.css">

<div data-role="popup" id="exampleWindow" data-theme="a" class="ui-corner-all" data-history="false">
  <div style="padding:0px 20px 10px 20px;" align="center">
    <h3>Example</h3>
    <textarea class="enableSelect" cols="40" rows="15" name="mytext" id="mytext" style="resize: vertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec quam consectetur, molestie sapien quis, fringilla felis. Vestibulum quam turpis, eleifend vel efficitur vel, pharetra eget lorem. In hac habitasse platea dictumst. Aliquam tincidunt massa vel maximus fermentum. Integer non velit arcu. Curabitur ultricies tincidunt nisi ultrices faucibus. Ut a purus dignissim, varius nisl vitae, ultricies dolor. Integer eget nisi sed ligula imperdiet accumsan ac eget lectus. Curabitur eu lacinia nunc, ac condimentum nunc. Etiam sit amet nulla massa. Etiam porta tortor ac sapien scelerisque, ac posuere mauris lacinia. Morbi id vestibulum nisl. Praesent dolor libero, bibendum quis molestie sit amet, posuere quis mi. Etiam scelerisque porttitor sem id vestibulum. Nullam nec suscipit arcu. Aenean semper in lorem eget aliquet.</textarea>
  </div>
</div>

<a id="openExampleWindow" href="#exampleWindow" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">Open popup</a>

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.js"></script>

这篇关于滚动到jQuery-Textarea的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！