সিএসএস - ওভারফ্লো: স্ক্রোল; - সর্বদা উল্লম্ব স্ক্রোল বারটি দেখান?

Question

সুতরাং বর্তমানে আমার আছে:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

তবে আমি বিশ্বাস করি না যে এটি কিছু ব্যবহারকারীর কাছে স্পষ্ট হবে যে সেখানে আরও বেশি সামগ্রী রয়েছে। আমার ডিভিতে আসলে আরও অনেকগুলি সামগ্রী রয়েছে তা না জেনে তারা পৃষ্ঠায় স্ক্রোল করতে পারে। আমি উচ্চতা 510px ব্যবহার করি যাতে এটি কিছু পাঠ্য কেটে দেয় তাই কিছু পৃষ্ঠায় এটি দেখতে আরও বেশি কন্টেন্ট রয়েছে বলে মনে হয় তবে এটি সমস্তটির জন্যই কার্যকর হয় না।

আমি একটি ম্যাক ব্যবহার করছি, এবং ক্রোম এবং সাফারিতে উল্লম্ব স্ক্রোল বারটি কেবল তখনই প্রদর্শিত হবে যখন মাউস ডিভের উপরে থাকবে এবং আপনি সক্রিয়ভাবে স্ক্রোল করবেন। এটি প্রদর্শন করার জন্য কি কোনও উপায় আছে?

Comments

উহম, আপনি কি এই সঠিক আচরণটি জিসফিডেলে পুনরায় তৈরি করতে পারবেন ? আপনার প্রদত্ত সিএসএসের একটি স্ক্রোলবারকে সর্বদা উপস্থিত থাকতে বাধ্য করা উচিত।

— এসজি 3 এস

হ্যাঁ, আপনার মনে হচ্ছে এমন কিছু অন্যান্য সিএসএস quirks ঘটছে যা এর কারণ হতে পারে, এটি সর্বদা স্ক্রোলবারটি প্রদর্শন করা উচিত। ডিভের মোড়কটি সঠিকভাবে স্টাইল করা হয়েছে তা নিশ্চিত করুন।

— শন স্টওয়ার্ড

আমি সিংহ চালাচ্ছি! এটা কি তাই? আমি একটি ভার্চুয়াল মেশিন খুলব এবং এটি দেখতে উইন্ডোজের জিনিসগুলির মতো দেখতে কী হবে ...

— জাম্বো

অভিশাপ, আমার খারাপ! এটি সিংহের একটি বৈশিষ্ট্য। আমি কেনার আগে আমি যা কিনছি তা সত্যিই আমার পড়া উচিত ... ধন্যবাদ ছেলেরা!

— জাম্বো

Answer 1

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

সমাধান: আপনার সিএসএসে অন্তর্ভুক্ত -

::-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);
}

/* always show scrollbars */

::-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);
}


/* css for demo */

#container {
  height: 4em;
  /* shorter than the child */
  overflow-y: scroll;
  /* clip height to 4em and scroll to show the rest */
}

#child {
  height: 12em;
  /* taller than the parent to force scrolling */
}


/* === ignore stuff below, it's just to help with the visual. === */

#container {
  background-color: #ffc;
}

#child {
  margin: 30px;
  background-color: #eee;
  text-align: center;
}

<div id="container">
  <div id="child">Example</div>
</div>

প্রয়োজন অনুযায়ী চেহারা কাস্টমাইজ করুন। উৎস

Comments

এই কি সাফারির সাথে আইপ্যাডে কাজ করা উচিত? আমি আইপ্যাড 2 চলমান আইওএস 6.1.3 এ আছি এবং এটি কার্যকর হয় না।

— crmpicco

এটি কি কেবলমাত্র নির্দিষ্ট শ্রেণির জন্য প্রয়োগ করার উপায় আছে?

— ফুটবলপাল

আমি ধারকটিতে 'ওভারফ্লো: অটো' সেট করার পরেই আমার জন্য কাজ করেছেন (আমার ক্ষেত্রে, একটি <ul>)। ধন্যবাদ!

— রব ক্যাম্পিয়ন

@ ফুটবলপল হ্যাঁ, এটি একটি শ্রেণিতে কাজ করে বলে মনে হচ্ছে; .classname :: - ওয়েবকিট-স্ক্রোলবার

— চেজ

আমি কীভাবে এটি আনুভূমিকভাবে কাজ করতে পারি? বার উল্লম্ব স্ক্রোলের জন্য দেখায় তবে অনুভূমিক স্ক্রোল নয়

— ব্রিটিশস্যাম

Answer 2

আইপ্যাড সাফারিতে দয়া করে নোট করুন, আপনার সিএসএসে webkit-overflow-scrolling: touch;কোথাও নাভিসকোডিং এর সমাধান কাজ করবে না । সমাধানটি হয় সমস্ত ঘটনাকে সরিয়ে -webkit-overflow-scrolling: touch;দিচ্ছে বা -webkit-overflow-scrolling: auto;নোভিসকোডিংয়ের সমাধান দিয়ে দিচ্ছে।

Comments

আমাদের সিএসএস - ওয়েবকিট-ওভারফ্লো-স্ক্রোলিং: টাচ এবং স্ক্রোলবারগুলি উভয়ই থাকা সম্ভব?

— জুলসি

Answer 3

এটি আমার পরীক্ষার থেকে আইওএস 7.1.x এ সাফারিতে আইপ্যাডের সাথে কাজ করবে, যদিও আমি আইওএস 6 সম্পর্কে নিশ্চিত নই। তবে এটি ফায়ারফক্সে কাজ করবে না। একটি jQuery প্লাগইন রয়েছে যার লক্ষ্য হল jScrollPane নামে ক্রস ব্রাউজারের অনুগত ।

এছাড়াও, স্ট্যাক ওভারফ্লোতে এখানে একটি সদৃশ পোস্ট রয়েছে যাতে আরও কিছু বিবরণ রয়েছে।

Comments

আইওএস 6 এর অস্তিত্বের আগে 2 বছর আগে এই প্রশ্নটি জিজ্ঞাসা করা হয়েছিল তা জেনে রাখুন।

— ওজিজা

ওয়েবকিটটি কেবল সাফারি ক্রোম। আপনাকে ফায়ারফক্সের নির্দিষ্ট ইঞ্জিনটি লক্ষ্য করতে হবে

— টাইগারবিয়ার

Answer 4

এটি স্ক্রোল বারগুলি সর্বদা প্রদর্শন করতে সক্ষম করে যখন উইন্ডোগুলির মধ্যে এমন সামগ্রী থাকতে পারে যা অ্যাক্সেস করার জন্য অবশ্যই স্ক্রল করা উচিত, এটি ম্যাকের সমস্ত উইন্ডো এবং সমস্ত অ্যাপ্লিকেশনগুলিতে প্রযোজ্য:

 অ্যাপল মেনু থেকে সিস্টেম পছন্দগুলি চালু করুন "সাধারণ" সেটিংস প্যানেলে ক্লিক করুন 'স্ক্রোল বারগুলি দেখান' এর জন্য অনুসন্ধান করুন এবং "সর্বদা" -এর পাশের রেডিওবক্সটি নির্বাচন করুন সিস্টেম সমাপ্তির বাইরে গিয়ে শেষ করুন

Comments

এটি প্রশ্নের উত্তর দেয় না, বাছাই করে তবে এটি ক্লায়েন্টের সাইড ফিক্সের পরিবর্তে এটি সার্ভারের পাশের স্থির করে। সুতরাং এটি ওয়েব পৃষ্ঠার ব্যবহারকারীর করার মতো কিছু, স্ট্যাকওভারফ্লো একটি প্রোগ্রামিং সাইট যাতে লোকেরা সাধারণত ব্যবহারকারীদের তাদের ব্রাউজারের সেটিংস পরিবর্তন করার উপায়ের পরিবর্তে কোড সমাধান খুঁজতে আসে।

— এরিক লেসচিনস্কি 5:57