1. घर
  2. सवाल और जवाब
  3. क्रोम में एक चिपचिपा इनपुट तत्व का संपादन शीर्ष

क्रोम में एक चिपचिपा इनपुट तत्व का संपादन शीर्ष

2017-06-08 7 views
14

मैं जब मैंने देखा है कि इनपुट फ़ील्ड या पाठ क्षेत्रों के अंदर की तरह संपादन योग्य तत्वों हो रही है, को गति प्रदान मेरी व्यक्तिगत परियोजना में से एक में सीएसएस 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>

स्रोत

2017-06-08 andreasonny83

+1

'sticky' अभी भी प्रयोगात्मक है। एक अच्छा मौका है कि यह केवल एक अनजान बग है और आपकी सबसे अच्छी शर्त है (जितना मैं इसे हल करना चाहता हूं) शायद आपके स्वयं के चिपचिपा व्यवहार को लागू करने के लिए है। – George

+0

आप इस व्यवहार को किस ब्राउजर पर देख रहे हैं? यह फ़ायरफ़ॉक्स में नहीं होता है। – TylerH

+0

यह क्रोम – Morpheus

उत्तर

1

आप कुंजी के कुछ सत्यापन करना होगा - शायद एक regex चेक के साथ सबसे अच्छा पुष्टि करने के लिए स्वीकार्य वर्ण, लेकिन आप कुंजी दबाने से एक जावास्क्रिप्ट समारोह कॉल कर सकते हैं, मान अपडेट इनपुट के, और झूठे वापसी:

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>

स्रोत

2017-06-09 09:32:02 user7363719

+0

हाँ, यह चारों ओर एक अच्छा तरीका है। 100% जो मैं खोज रहा था लेकिन मैं अपने परिदृश्य में पढ़ सकता हूं। – andreasonny83

+0

स्थिति: -वेबकिट-चिपचिपा मौजूद नहीं है। आप इसे अपने सीएसएस में अनावश्यक बाइट जोड़ रहे हैं। – BoltClock

+0

ऐसा लगता है कि इसे यहाँ करता है: https://developer.mozilla.org/en-US/docs/Web/CSS/position?v=example#Sticky_positioning – user7363719

1

मैंने इसे काम करने में कामयाब रहा है, लेकिन शायद यह सबसे अच्छा समाधान नहीं है।

  1. जोड़ें position: sticky साथ वर्ग के लिए या तो overflow: auto या overflow: hidden जोड़ें।
  2. <input> से placeholder निकालें।

मैं क्यों 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>

स्रोत

2017-06-09 20:49:45 akcan

+0

दुर्भाग्य से इस तरह के आसपास कोणीय उपयोग करते हुए मेरे Angular2 + परियोजना काम नहीं करता है सामग्री। मुद्दा तब भी दिखाई देता है जब मैं प्लेसहोल्डर को हटा देता हूं और मैं तत्व का ओवरफ़्लो बदलता हूं – andreasonny83

संबंधित मुद्दे

 संबंधित मुद्दे