html - 具有固定页脚的文本区域未正确显示下一行

Question

我在固定页眉和固定页脚之间有一个带有文本区域的页面。我使用一些 jquery 来确保视口在您键入时在底部显示新的 textarea 行。如果没有固定的页脚（白色背景），jquery 会按预期工作，并且当您在底部键入时，新行将保持在视图中。但是使用固定页脚，我必须手动滚动才能看到底部的新内容。它隐藏在页脚后面。我发现，如果我在输入时按 Enter，即使有页脚，它也会自动滚动内容以保持在视图中。但是如果我连续输入，我必须滚动才能看到新的隐藏内容。我希望在 textarea 中有固定页脚并自动向下滚动，因此无论输入多少，新内容始终显示在固定页脚上方。我怎样才能做到这一点？

$(document).ready(function() {
        $('#close-post-modal').click(function() {
            $("#main-container").load("mobile/mobile.view.php");
            $("#main-content-mobile").load("mobile/feed.php");
            document.location.hash = "feed";
        });

        $('#post-comment-textarea-mobile').on('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });
    });

  #post-comment-textarea-mobile {
    border: none;
    overflow: auto;
    outline: none;
    resize: none;
    width: 100%;
  }

  #post-modal-header {
    position: fixed;
    top: 0;
  }

  #post-modal-sub-header {
    position: fixed;
  }

  #post-modal-footer {
    position: fixed;
    bottom: 0;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="width-100p">
    <div id="post-modal-header" class="bg-white width-100p height-2r space-evenly-x padding-top-1">
        <div id="close-post-modal">X</div>
        <div>New Post</div>
        <div id="save-post-modal">Save</div>
    </div>
    <div id="post-modal-sub-header" class="bg-white padding-left-1 width-100p height-2r left padding-top-2">
        <div class="padding-right-5px">Image</div>
        <div>Username</div>
    </div>


    <div class="padding-left-2 padding-right-2 padding-bottom-1 padding-top-5">
        <textarea id="post-comment-textarea-mobile" placeholder="Your Thoughts?"></textarea>
    </div>

    <div id="post-modal-footer" class="bg-white width-100p space-evenly-x padding-top-2 padding-bottom-1">
        <div>Image</div>
        <div>Video</div>
        <div>Tag</div>
    </div>

</div>

标签： htmljquerycss

Answer 1

我能够通过在 textarea 的滚动高度和 window.scrollTo 的输入到 textarea 的 ScrollHeight 上添加 100 来使其工作。

我不确定 100 是否是所需的数字，您可以在您的设计中使用它，它对我有用。

$(document).ready(function() {
        $('#close-post-modal').click(function() {
            $("#main-container").load("mobile/mobile.view.php");
            $("#main-content-mobile").load("mobile/feed.php");
            document.location.hash = "feed";
        });

        $('#post-comment-textarea-mobile').on('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight + 100) + 'px';
            window.scrollTo(0,document.querySelector("#post-comment-textarea-mobile").scrollHeight);
        });
    });

body{padding:0;}
#post-comment-textarea-mobile {
    border: none;
    overflow: auto;
    outline: none;
    resize: none;
    width: 100%;
  }

  #post-modal-header {
    position: fixed;
    top: 0;
  }

  #post-modal-sub-header {
    position: fixed;
    background:#000;
  }

  #post-modal-footer {
    position: fixed;
    bottom: 0;
    width:100%;
    background:#000;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="width-100p">
    <div id="post-modal-header" class="bg-white width-100p height-2r space-evenly-x padding-top-1">
        <div id="close-post-modal">X</div>
        <div>New Post</div>
        <div id="save-post-modal">Save</div>
    </div>
    <div id="post-modal-sub-header" class="bg-white padding-left-1 width-100p height-2r left padding-top-2">
        <div class="padding-right-5px">Image</div>
        <div>Username</div>
    </div>


    <div class="padding-left-2 padding-right-2 padding-bottom-1 padding-top-5">
        <textarea id="post-comment-textarea-mobile" placeholder="Your Thoughts?"></textarea>
    </div>

    <div id="post-modal-footer" class="bg-white width-100p space-evenly-x padding-top-2 padding-bottom-1">
        <div>Image</div>
        <div>Video</div>
        <div>Tag</div>
    </div>

</div>