編集Chromeで粘着性の入力要素がトップ

Question

にスクロールするページを引き起こし、私は、入力フィールドまたは内部のテキストエリアなどの編集可能な要素を有する、トリガーことに気づいたときに私の個人的なプロジェクトの一つでCSS position: stickyを使用しようとしていましたページをスクロールして上部にスクロールします。

可能であれば、この動作を削除したいと思います。

.container { 
 
    height: 5000px; 
 
} 
 

 
.heading{ 
 
    background: #ccc; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    margin-top: 10px; 
 
    font-size: 30px; 
 
    padding-left: 10px; 
 
    position: -webkit-sticky; 
 
    position: sticky; 
 
    top: 0px; 
 
}

<h1>Lorem Ipsum</h1> 
 

 
<div class="container"> 
 
    <div class="heading"> 
 
    <input placeholder="Edit this while scrolling..."> 
 
    </div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
</div>

Answer 1

あなたはキーのいくつかの検証を行う必要があるでしょう - 許容可能な文字を確認するための正規表現のチェックでおそらく最高をしますが、キー操作からJavaScript関数を呼び出すことができ、値を更新入力の、そしてfalseを返す：

var e = document.getElementById('input'); 
 
e.onkeypress = myFunction; 
 

 
function myFunction(t) { 
 
    document.getElementById('input').value += t.key; 
 
    return false; 
 
}

.container { 
 
    height: 1000px; 
 
} 
 

 
.heading{ 
 
    background: #ccc; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    margin-top: 10px; 
 
    font-size: 30px; 
 
    padding-left: 10px; 
 
    position: -webkit-sticky; 
 
    position: sticky; 
 
    top: 0px; 
 
}

<h1>Lorem Ipsum</h1> 
 

 
<div class="container"> 
 
    <div class="heading"> 
 
    <input id="input" placeholder="Edit this while scrolling..."> 
 
    </div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
</div>

Answer 2

私はそれを動作させることができましたが、おそらく最善の解決策ではありません。

1. はposition: stickyでクラスにoverflow: autoかoverflow: hiddenのいずれかを追加します。
2. placeholderを<input>から削除します。

私はoverflowを追加またはplaceholderを削除すると、多分誰かがこれを説明するのに役立つことができ、それが仕事になる理由はわかりません。

.container { 
 
    height: 5000px; 
 
} 
 

 
.heading{ 
 
    background: #ccc; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    margin-top: 10px; 
 
    font-size: 30px; 
 
    padding-left: 10px; 
 
    position: -webkit-sticky; 
 
    position: sticky; 
 
    top: 0px; 
 
    overflow: auto; 
 
}

<h1>Lorem Ipsum</h1> 
 

 
<div class="container"> 
 
    <div class="heading"> 
 
    <input> 
 
    </div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
    <div>Lorem Ipsum</div> 
 
</div>