ওয়েবকিট / ব্লিঙ্কে ম্যাকওএস ট্র্যাকপ্যাড ব্যবহারকারীদের জন্য স্ক্রোল বারগুলি গোপন করা থেকে রোধ করা হচ্ছে

Question

10.7 (ম্যাক ওএস এক্স লায়ন) ম্যাকোস-এ ওয়েবকিট / ব্লিঙ্কের (সাফারি / ক্রোম) ডিফল্ট আচরণ হ'ল ট্র্যাকপ্যাড ব্যবহারকারীরা যখন ব্যবহার না করছেন তখন তাদের থেকে স্ক্রোল বারগুলি আড়াল করা। এটি বিভ্রান্তিকর হতে পারে ; স্ক্রোল বার প্রায়শই একমাত্র ভিজ্যুয়াল কিউ হয় যে কোনও উপাদানটি স্ক্রোলযোগ্য।

উদাহরণ ( jsfiddle )

এইচটিএমএল

<div class="frame">
    Foo<br />
    Bar<br />
    Baz<br />
    Help I'm trapped in an HTML factory! 
</div>

সিএসএস

.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 3em;
    width: 10em;
    line-height: 1em;
}​

ওয়েবকিট (ক্রোম) স্ক্রিনশট

প্রেস্টো (অপেরা) স্ক্রিনশট

---

আমি কীভাবে একটি স্ক্রোল বারকে সর্বদা ওয়েবকিতে কোনও স্ক্রোলযোগ্য উপাদানটিতে প্রদর্শিত হতে বাধ্য করতে পারি?

Comments

আপনি কি ওভারফ্লো চেষ্টা করেছেন: স্ক্রোল? এটি ক্রোমে কাজ করত। স্ক্রোলবারগুলি সর্বদা প্রদর্শন করতে বাধ্য করা উচিত।

— xaddict

লক্ষ্য করুন এটি ম্যাক OS X ফায়ারফক্স মধ্যে একটা সমস্যা

— ব্লেইস

ম্যান, ওয়েবসাইটগুলি যখন আমার সিস্টেম এবং ব্যবহারকারী এজেন্টের সাথে ইউআইয়ের সাথে জড়িত তখন আমি এটিকে ঘৃণা করি ।

— amn

Answer 1

স্ক্রোল বারগুলির উপস্থিতি ওয়েবকিটের -webkit-scrollbarসিউডো-উপাদানগুলি  ^{[ ব্লগ ] দিয়ে নিয়ন্ত্রণ করা যায়} । আপনি সেট করে ডিফল্ট চেহারা ও আচরণ নিষ্ক্রিয় করতে পারেন -webkit-appearance ^{[ ডক্স ]} থেকে none।

আপনি ডিফল্ট শৈলী মুছে ফেলার কারণে আপনার নিজের স্টাইলটিও নির্দিষ্ট করতে হবে বা স্ক্রোল বারটি কখনই প্রদর্শিত হবে না। নিম্নলিখিত সিএসএস লুকিয়ে থাকা স্ক্রোল বারগুলির চেহারা পুনরায় তৈরি করে:

উদাহরণ ( jsfiddle )

সিএসএস

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
} 

ওয়েবকিট (ক্রোম) স্ক্রিনশট

Comments

জোর করে ম্যাকোসেক্স সিংহ স্ক্রোলবারগুলির জন্য, এখানে বর্ণিত কৌশলটি এই কৌশলটির সাথে কাজ করে না: stackoverflow.com/a/3417992/62255 । যদিও কোনও উদ্বেগ নেই - যেহেতু আমরা স্পষ্টভাবে এখানে মাত্রা নির্ধারণ করছি, আমরা সেগুলি সরাসরি অ্যাক্সেস করতে পারি।

— jedierikb

নোট করুন যে আপনি এর সাথে স্ক্রোলবারের ট্র্যাক / ব্যাকগ্রাউন্ডটিও কাস্টমাইজ করতে পারেন:.frame::-webkit-scrollbar-track { background-color: #FFF; border-radius: 8px; }

— এক্সএমএল

নোট ওয়েবকিট স্ক্রোলবার শৈলীগুলি আইওএস 7 (এবং সম্ভবত 6) এ কাজ করে না।

— রবডাব্লু

একটি বিষয় উল্লেখ করার জন্য হ'ল, আমার পরীক্ষায় এবং অন্য কারও দ্বারা সত্যই পুরানো মন্তব্যে মনে হয় আপনার সর্বদা অন স্ক্রোলবার এবং গতিবেগের মতো স্ক্রোলিং থাকতে পারে না যা লোকেদের আইওএস দ্বারা ব্যবহৃত হয়। এরকম ভরবেগ-স্ক্রলিং সিএসএস আমার কাস্টম স্ক্রোলবারগুলি ঘটিত অদৃশ্য হয়ে।

— জেএমকিউ

ইদানীং এটি যাচাই করা হয়নি, তবে এই সমাধানটি উল্লেখ করে আমাদের সিএসএসে আমি এই নোটটি পেয়েছি: "নোট করুন এটি উইন্ডোজের ক্রোমে যেমন ওএস এক্স স্টাইলের স্ক্রোলবারগুলি দেখায়।"

— হেনরিক এন

Answer 2

এক পৃষ্ঠার ওয়েব অ্যাপ্লিকেশনের জন্য যেখানে আমি গতিশীল স্ক্রোলযোগ্য বিভাগগুলি যুক্ত করি, আমি ওএসএক্সের স্ক্রোলবারগুলি প্রোগ্রামিকভাবে একটি পিক্সেল নীচে এবং ব্যাক আপ করে ট্রিগার করি:

// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;

// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);

এটি ভিজ্যুয়াল কিউ ফেইড ইন এবং আউট ট্রিগার করে।

Answer 3

এখানে কোডের একটি সংক্ষিপ্ত বিট যা আপনার পুরো ওয়েবসাইট জুড়ে স্ক্রোল বারগুলিকে পুনরায় সক্ষম করে। আমি এটি বর্তমান সর্বাধিক জনপ্রিয় উত্তরের চেয়ে আলাদা কিনা তা নিশ্চিত নই তবে এখানে এটি রয়েছে:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

এই লিঙ্কটিতে পাওয়া গেছে: http://simurai.com/blog/2011/07/26/webkit-scrolbar

Answer 4

ব্রাউজার স্ক্রোলবারগুলি আইফোন / আইপ্যাডে মোটেই কাজ করে না। কর্মক্ষেত্রে আমরা একটি সামঞ্জস্যপূর্ণ ক্রস ব্রাউজার ইউআই সরবরাহ করতে jScrolPane এর মতো কাস্টম জাভাস্ক্রিপ্ট স্ক্রোলবারগুলি ব্যবহার করছি: http://jscrollpane.kelvinluck.com/

এটি আমার পক্ষে খুব ভাল কাজ করে - আপনি কিছু সত্যই সুন্দর কাস্টম স্ক্রোলবারগুলি তৈরি করতে পারেন যা আপনার সাইটের নকশার সাথে মানানসই।

Answer 5

সিংহের গোপন স্ক্রোল বারগুলির সাথে ডিল করার আরও একটি ভাল উপায় হ'ল নীচে স্ক্রোল করার জন্য একটি প্রম্পট প্রদর্শন করা। এটি টেক্সট ক্ষেত্রের মতো ছোট স্ক্রোল অঞ্চলগুলিতে কাজ করে না তবে বড় স্ক্রোল অঞ্চলগুলির সাথে ভালভাবে কাজ করে এবং সাইটের সামগ্রিক শৈলী ধরে রাখে। একটি সাইট এটি করছে http://versusio.com , কেবলমাত্র এই উদাহরণ পৃষ্ঠাটি দেখুন এবং প্রম্পটটি দেখতে 1.5 সেকেন্ড অপেক্ষা করুন:

http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb

বাস্তবায়নটি কঠিন নয় তবে আপনাকে যত্ন নিতে হবে, যখন ব্যবহারকারী ইতিমধ্যে স্ক্রোল করেছেন তখন আপনি প্রম্পটটি প্রদর্শন করবেন না।

আপনার দরকার jQuery + অ্যান্ডস্কোর এবং

$(window).scroll ব্যবহারকারী ইতিমধ্যে নিজের দ্বারা স্ক্রোল করেছে কিনা তা পরীক্ষা করতে,

_.delay() আপনি প্রম্পট প্রদর্শন করার আগে একটি বিলম্ব ট্রিগার - প্রম্পটটি বাধা দেওয়া উচিত নয়

$('#prompt_div').fadeIn('slow') আপনার প্রম্পট এবং অবশ্যই বিবর্ণ

$('#prompt_div').fadeOut('slow') প্রম্পটটি দেখার পরে যখন ব্যবহারকারী স্ক্রল করে তখন বিবর্ণ হয়ে যায়

এছাড়াও, আপনি গুগল অ্যানালিটিক্স ইভেন্টগুলি ব্যবহারকারীর স্ক্রোলিং আচরণ ট্র্যাক করতে বাঁধতে পারেন।