2013-07-31 3 views
5

जब भी मैं चेकबॉक्स पर क्लिक करता हूं, ब्राउज़र विंडो (फ़ायरफ़ॉक्स) स्क्रीन के शीर्ष पर स्क्रॉल करेगा।
मैं इस व्यवहार को कैसे रोक सकता हूं ताकि जब मैं चेकबॉक्स पर क्लिक करता हूं तो ब्राउज़र विंडो शीर्ष पर स्क्रॉल नहीं होगी?
यहां कोड http://jsfiddle.net/zAFND/6/
से प्राप्त कोड यहां है।चेकबॉक्स पर क्लिक करते समय ब्राउज़र के पृष्ठ पर स्क्रॉल करने से मैं ब्राउज़र को कैसे रोक सकता हूं?

#ck-button label input { 
    position:absolute; 
    top:-20px; 
} 

आप एक लेबल पर क्लिक करते हैं ब्राउज़र संबंधित इनपुट ध्यान केंद्रित करने की कोशिश करता है:

<html> 
    <head> 
     <title>Test</title> 
     <style> 
      div label input { 
       margin-right: 100px; 
      } 

      body { 
       font-family:sans-serif; 
      } 

      #ck-button { 
       margin: 4px; 
       background-color: #EFEFEF; 
       border-radius: 4px; 
       border: 1px solid #D0D0D0; 
       overflow: auto; 
       float: left; 
      } 

      #ck-button { 
       margin: 4px; 
       background-color: #EFEFEF; 
       border-radius: 4px; 
       border: 1px solid #D0D0D0; 
       overflow: auto; 
       float: left; 
      } 

      #ck-button:hover { 
       margin: 4px; 
       background-color: #EFEFEF; 
       border-radius: 4px; 
       border: 1px solid red; 
       overflow: auto; 
       float: left; 
       color: red; 
      } 

      #ck-button label { 
       float: left; 
       width: 4.0em; 
      } 

      #ck-button label span { 
       text-align: center; 
       padding: 3px 0px; 
       display: block; 
      } 

      #ck-button label input { 
       position: absolute; 
       top: -20px; 
      } 

      #ck-button input:checked + span { 
       background-color: #911; 
       color: #fff; 
      } 
     </style>  
</head> 
    <body> 
     <br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <div id="ck-button"> 
      <label> 
       <input type="checkbox" value="1"><span>red</span> 
      </label> 
     </div> 
    </body> 

उत्तर

21

समस्या यह नियम है। आपके मामले में चेकबॉक्स तत्व पृष्ठ के शीर्ष पर, व्यूपोर्ट के बाहर भी झूठ बोल रहा है। तो फ़ायरफ़ॉक्स वहां स्क्रॉल करने की कोशिश करता है।

मुझे लगता है कि आप इस तरह से इसे हल कर सकते जोड़कर:

#ck-button label { 
    display: block; 
    position: relative; 
    overflow: hidden; 
} 

डेमो

Try before buy

संपादित

मैं आज वापस इस उत्तर के लिए आया था के रूप में और Heisenberg's के संबंध में: वह पी चरम मानों का उपयोग करके एक समस्या उत्पन्न हो सकती है और एक और समाधान जोड़ता है जो मूल रूप से मेरे जैसा ही क्विर्क होता है।

उन संभावित quirks से बचने के लिए, बस इनपुट को हाइड करके एक और संभावित समाधान है। कार्यक्षमता प्रभावित नहीं होती है, क्योंकि आप नीचे दिए गए लिंक में परीक्षण कर सकते हैं।

सीएसएस

#ck-button label input { 
    display: none; 
} 

डेमो

Second demo

+1

हाँ धन्यवाद यह काम करता है। – themis

+1

मुझे आपका जवाब मिला क्योंकि मैं स्टार रेटिंग विजेट का उपयोग कर रहा था जिसने अपने रेडियो बटन की स्थिति के लिए -99 99 का उपयोग किया था। धन्यवाद! –

3

आप इस तरह अपने चेकबॉक्स इनपुट छुपा सकते:

13

स्वीकार्य उत्तर पूरी तरह से सच नहीं है। काम करता है, लेकिन सभी मामलों में नहीं।

आप "शीर्ष" विशेषता पर तत्वों (शायद -999em या समान), इस मामले में छिपाने के लिए आम सीएसएस का उपयोग करते हैं स्थिति: रिश्तेदार करने के लिए हमेशा क्योंकि -999em व्यूपोर्ट तुलना में बहुत अधिक हो जाएगा कुछ भी नहीं है ।

उत्तर स्वीकार किया गया ठीक काम करता है क्योंकि "शीर्ष" केवल -20px है। इसे अधिक संख्या में सेट करने का प्रयास करें और आपको समस्या दिखाई देगी।

तो, समाधान एक सापेक्ष स्थिति सेट नहीं करना है। मुझे लगता है कि सही तरीका केवल पर बाएं स्थिति (शीर्ष पर नहीं) पर ऋणात्मक मान निर्धारित करता है।

इसे आज़माएं। :)

+0

वास्तव में यह काम करता है। स्वीकार्य उत्तर शीर्ष पैडिंग जोड़ा गया और इसने इसे हल किया, धन्यवाद! – hansaplast

+0

[मेरे उत्तर] में एक समस्या को इंगित करने के लिए धन्यवाद (http://stackoverflow.com/a/17974351/1456376)। मैंने इसे तदनुसार अपडेट किया है। इसके अलावा आपका समाधान एक और संभावना है, यह मेरे जैसा ही क्विर्क है। 'बाएं' के लिए मान को बहुत अधिक सेट करने का प्रयास करें, जैसे: '# सीके-बटन लेबल इनपुट {स्थिति: पूर्ण; बाएं: -10000px; } '। आप इसे [jsfiddle पर डेमो] (http://jsfiddle.net/rnxaf4ve/) में देख सकते हैं। आप वेबकिट-ब्राउजर (क्रोम और सफारी) में बटन पर क्लिक नहीं कर पाएंगे और यह आवश्यकतानुसार फ़ायरफ़ॉक्स में भी काम नहीं करेगा। – insertusernamehere

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

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