IOS पर CSS अतिप्रवाह के साथ स्क्रॉल बार कैसे प्राप्त करें

Question

एक iPad वेबसाइट विकसित करने के लिए मैंने overflow: autoस्क्रॉल संपत्ति प्राप्त करने के लिए CSS संपत्ति का उपयोग करने की कोशिश की है div, लेकिन अगर दो उंगलियों के स्क्रॉल काम कर रहे हैं तो भी मेरा डिवाइस उन्हें दिखाने से इनकार कर रहा है।

मैंने कोशिश की

overflow: auto;

तथा

overflow: scroll;

और परिणाम वही है।

मैं केवल iPad पर परीक्षण कर रहा हूं (डेस्कटॉप ब्राउज़र पूरी तरह से काम करता है)।

कोई विचार?

Comments

मेरी समस्या यहाँ बहुत अच्छी तरह से वर्णित है: webmanwalking.org/library/experiments/…

— mat_jack1

Answer 1

टिप्पणी के बाद संपादित करें , कृपया, kritzikratzi द्वारा :

[शुरू] ios 5beta के साथ एक नई संपत्ति -webkit-overflow-scrolling: touchजोड़ी जा सकती है जिसके परिणामस्वरूप अपेक्षित व्यवहार होना चाहिए।

कुछ, लेकिन बहुत कम, आगे पढ़ना:

• IOS 5 में नेटिव मोमेंटम स्क्रॉलिंग

---

मूल उत्तर , पोस्टर के लिए छोड़ दिया।

दुर्भाग्य से न तो overflow: auto, या scroll, iOS उपकरणों पर स्क्रॉलबार का उत्पादन करता है, जाहिर है स्क्रीन-चौड़ाई के कारण जो इस तरह के उपयोगी तंत्र को ले जाएगा।

इसके बजाय, जैसा कि आपने पाया है, उपयोगकर्ताओं को टू- overflowथ्रेड सामग्री को स्क्रॉल करने के लिए टू-फिंगर स्वाइप करने की आवश्यकता होती है। एकमात्र संदर्भ, चूंकि मैं स्वयं फोन के लिए मैनुअल खोजने में असमर्थ हूं, इसलिए मैं यहां पाया जा सकता है: tuaw.com: iPhone 101: दो-उंगलियों वाला स्क्रॉल ।

इसके लिए केवल एक ही काम-काज जिसके बारे में मैं सोच सकता हूं, वह यह है कि क्या आप overflowतत्वों के लिए अपने स्वयं के स्क्रॉल-बार बनाने के लिए संभवतः कुछ जावास्क्रिप्ट, और शायद jQTouch का उपयोग कर सकते हैं। वैकल्पिक रूप से आप इसे हटाने के लिए @media क्वेरीज़ का उपयोग कर सकते हैं overflowऔर सामग्री को पूर्ण रूप से दिखा सकते हैं, क्योंकि iPhone उपयोगकर्ता को यह मेरा वोट मिलता है, यदि केवल सरासर सादगी के लिए। उदाहरण के लिए:

<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />

पूर्ववर्ती कोड ए लिस्ट के अलावा , एक ही लेख से जुड़ा हुआ है, ऊपर से (मुझे यकीन नहीं है कि वे क्यों छोड़ दिए हैं type="text/css", लेकिन मुझे लगता है कि कारण हैं।

Comments

यह बहुत उपयोगी है! तो इसे हासिल करने के लिए CSS-only तरीके नहीं हैं?

— मटजैक

अफसोस की बात है कि सीएसएस के सभी रूपांतर जो पृष्ठ तत्वों पर स्क्रॉल-बार लागू कर सकते हैं, दुर्भाग्य से, वर्बोटेन हैं । एकमात्र विकल्प हैं: 1, जावास्क्रिप्ट का उपयोग अनुकरण करने के लिए (जो एक मूल कार्य होना चाहिए) या, अधिमानतः, 2, मोबाइल-विशिष्ट स्टाइलशीट बनाने के लिए @media प्रश्नों का उपयोग करें जो स्क्रॉलिंग-तत्वों की आवश्यकता को कम करते हैं।

— डेविड का कहना है कि

ios 5beta के साथ शुरू करके एक नया गुण -webkit-overflow-स्क्रॉलिंग: स्पर्श जोड़ा जा सकता है जिसके परिणामस्वरूप अपेक्षित व्यवहार होना चाहिए।

— क्रिटिकराटजी

@kritzikratzi: अद्यतन के लिए धन्यवाद! मैंने उस बारे में कुछ नहीं सुना था, 'अब तिल; दिलचस्प खोज :)

— डेविड कहते हैं, मोनिका

बहुत ही रोचक समाधान .... दुर्भाग्य से इस विधि के साथ स्क्रॉलबार केवल स्क्रॉलिंग के दौरान दिखाई देता है, और हमेशा नहीं .....

— लुका डेटोमी

Answer 2

इस कोड को अपने सीएसएस में लागू करें

::-webkit-scrollbar{

    -webkit-appearance: none;
    width: 7px;

}

::-webkit-scrollbar-thumb {

    border-radius: 4px;
    background-color: rgba(0,0,0,.5); 
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Comments

इसने क्रोम के IPAD सिम्युलेटर पर पूर्णता का काम किया। मैं अभी तक एक वास्तविक IPAD पर कोशिश करने के लिए है, लेकिन उंगलियों को पार कर गया, धन्यवाद!

— user2808054

Answer 3

मैंने कुछ परीक्षण किए हैं और स्क्रॉलबर्स के कार्यों को फिर से परिभाषित करने के लिए CSS3 का उपयोग किया है और आपको अपना Overflow:scroll;या रखना हैOverflow:auto

मैं कुछ इस तरह से समाप्त हुआ ...

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
    border-bottom: 1px solid #eee; 
    border-top: 1px solid #eee;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); 
} 

केवल नीचे की ओर, जिसे मैं अभी तक समझ नहीं पाया हूं कि कैसे iProducts पर स्क्रॉलबार के साथ बातचीत करना है, लेकिन आप इसे स्क्रॉल करने के लिए सामग्री के साथ बातचीत कर सकते हैं

Comments

यह भी स्क्रॉलबार सामग्री के शीर्ष पर नहीं होगा, लेकिन उन खिड़कियों की तरह हो सकता है जहां यह अपना स्थान रखता है (सामग्री को बाईं ओर धकेलता है)। या किसी भी विचार से बचने के लिए के रूप में?

— हंस

रिकॉर्ड के लिए, ::-webkit-scrollbariPhone 4 / iOS 7 के लिए काम नहीं करता है

— lulalala

Answer 4

यहाँ क्रिस बर्र द्वारा दिया गया समाधान

function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}

function touchScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollTop+event.touches[0].pageY;
            event.preventDefault();
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollTop=scrollStartPos-event.touches[0].pageY;
            event.preventDefault();
        },false);
    }
}

मेरे लिए ठीक काम करता है। यदि आपको कुछ क्लिक का उपयोग करने की आवश्यकता है, तो event.preventDefault हटाएं ...

Answer 5

IScroll4 जावास्क्रिप्ट पुस्तकालय यह सही अप ठीक कर देंगे। इसमें एक hideScrollbarविधि है जिसे आप falseस्क्रॉलबार को गायब होने से रोकने के लिए सेट कर सकते हैं ।

Answer 6

एसओ पर अन्य 2 लोगों ने समस्या का सीएसएस केवल संभव समाधान प्रस्तावित किया। डेविड थॉमस का समाधान सही है लेकिन इसकी सीमा है कि स्क्रॉलबार केवल स्क्रॉलिंग के दौरान दिखाई देता है।

स्क्रॉलबार को हमेशा दृश्यमान रखने के लिए, निम्नलिखित लिंक पर सुझाए गए दिशानिर्देशों का पालन करना संभव है:

• मैं WebKit / ब्लिंक में OS X ट्रैकपैड उपयोगकर्ताओं के लिए स्क्रॉल पट्टियों को कैसे छिपाया जा सकता है?
• सीएसएस - अतिप्रवाह: स्क्रॉल; - हमेशा वर्टिकल स्क्रॉल बार दिखाएं?

Answer 7

सुनिश्चित करें कि आपका शरीर और divs एक नहीं है

  position:fixed

और यह काम नहीं करेगा

Answer 8

मेरे अनुभव में आपको यह सुनिश्चित करने की आवश्यकता है कि तत्व ने काम करने के display:block;लिए आवेदन किया है -webkit-overflow-scrolling:touch;।

Comments

यह मेरे लिए काम नहीं करता है .. chorme कहता है कि -webkit-overflow-स्क्रॉलिंग: स्पर्श; अमान्य है

— विक्टर ह्यूगो अरंगो ए।

Answer 9

मेरे लिए ठीक काम करता है, कृपया कोशिश करें:

.scroll-container {
  max-height: 250px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

Answer 10

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}

इस कोड का उपयोग करें, यह ios / android APP वेबव्यू में काम करता है; यह कुछ नहीं पोर्टेबल सीएसएस कोड को हटा;

Answer 11

यदि आप मोबाइल पर टच के साथ क्षैतिज divस्क्रॉलिंग प्राप्त करने की कोशिश कर रहे हैं , तो अद्यतन सीएसएस फिक्स काम नहीं करता है (एंड्रॉइड क्रोम और आईओएस सफारी कई संस्करणों पर परीक्षण किया गया), उदाहरण के लिए:

-webkit-overflow-scrolling: touch

मैंने एक समाधान पाया और सीएसएस ट्रिक से पहले क्षैतिज स्क्रॉलिंग के लिए इसे संशोधित किया। मैंने इसे एंड्रॉइड क्रोम और आईओएस सफारी पर परीक्षण किया है और श्रोता स्पर्श की घटनाएं लंबे समय से हैं, इसलिए इसका अच्छा समर्थन है: http://caniuse.com/#feat=touch ।

उपयोग:

touchHorizScroll('divIDtoScroll');

कार्य:

function touchHorizScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollLeft+event.touches[0].pageX;              
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollLeft=scrollStartPos-event.touches[0].pageX;              
        },false);
    }
}
function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}  

ऊर्ध्वाधर समाधान (पूर्व सीएसएस चाल) से संशोधित:

http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/