মূল স্ক্রোলবারটি সর্বদা দৃশ্যমান করা

Question

কোনও ব্যবহারকারী কোনও ওয়েব পৃষ্ঠাতে (যখন পৃষ্ঠায় স্ক্রোলবারের অ্যাক্টিভেশনটি ট্রিগার করার মতো পর্যাপ্ত সামগ্রী নেই) ব্রাউজারের উল্লম্ব স্ক্রোলবারটি দৃশ্যমান থাকার জন্য কোন সিএসএসের প্রয়োজন?

Comments

প্রতিরোধ করার জন্য উইন্ডোজে জাম্পিং স্ক্রোলবারগুলি একটা হল ভাল সমাধান ।

— জোশ হাবদাস

Answer 1

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

এটি স্ক্রোলবারটি সর্বদা দৃশ্যমান এবং প্রয়োজন হলে কেবল সক্রিয় করে তোলে।

আপডেট: উপরেরগুলি যদি কেবলমাত্র এটি ব্যবহার করে না কাজ করে।

html {
    overflow-y:scroll;
}

Comments

এফএফ এর কোন সংস্করণটির জন্য সমর্থন এনেছে তা আপনার কী ধারণা overflow-y? যেমনটি মনে হয় যে সম্পত্তির -moz-scrollbars-verticalপক্ষে অবমানিত overflow-y।

— আইওনু জি স্টান

আমি মনে করি ইন্টারনেট এক্সপ্লোরার 6.x +, ফায়ারফক্স 1.5+ যদি আমি সঠিকভাবে মনে করি। আমি উপরের কোডটি ব্যবহার করছি এবং এটি আমার জন্য FF1.5-3.5.1 এবং আই 6-8 এ কাজ করে।

— Corv1nus

"পৃষ্ঠার জাম্পিং" এর কোনও বিকল্প আছে যখন আপনার সাইটের নির্দিষ্ট পৃষ্ঠাগুলি খুব ছোট হয় যখন একটি স্ক্রোল বার থাকে এবং অন্যগুলি হয়? নাকি এটিই "সেরা অনুশীলন"? আমাকে স্বীকার করতে হবে, আমি ওয়েবগুলিতে এমন অনেক পৃষ্ঠা দেখতে পাচ্ছি না যা একটি সম্পূর্ণ পৃষ্ঠা গ্রহণ করে না।

— জেস

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

— কর্ভ 1 এন

যারা (আমার মতো) স্টাইলিংটি htmlকিছুটা হ্যাক- ওয়াইয়ের জন্য খুঁজে পান তাদের জন্য লক্ষ্য করুন যে আপনি স্ট্রাকচারাল সিউডো-সিলেক্টারের :rootপরিবর্তে ব্যবহার করতে পারেন html। দেখুন: বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

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

এই জিনিস কাজ! তবে কীভাবে আপনি এটি কেবলমাত্র একটি নির্দিষ্ট ডিভিতে তৈরি করতে পারেন?

— ধনী

@ সমৃদ্ধ অন্যান্য সিএসএস উপাদানগুলির মতো। .Yourdiv :: - ওয়েবকিট-স্ক্রোলবার {...}

— ক্রিস

@ ক্রিস হাই, উত্তরের জন্য ধন্যবাদ, এটির উদাহরণ এখানে। stackoverflow.com/a/54667091/2637261

— সমৃদ্ধ

কেন এটি ব্যবহার করা হয়-webkit-appearance: none;

— সুরজ জৈন

এটা অসাধারণ! গ্রহণযোগ্য উত্তর হওয়া উচিত।

— সাইবারপুঙ্কার

Answer 3

গত বছরগুলিতে বিষয়গুলি পরিবর্তিত হয়েছে। উপরের উত্তরগুলি আর কোনও ক্ষেত্রেই বৈধ নয়। অ্যাপল সর্বত্র অদৃশ্য স্ক্রোলবারগুলিকে চাপ দিচ্ছে । সাফারি, ক্রোম এবং ম্যাকওগুলিতে ফায়ারফক্স (এবং আইও) কেবল যখন স্ক্রোল করে তখন কেবল স্ক্রোলবারগুলি দেখায় - আমি বর্তমান উইন্ডোজ / আইই সম্পর্কে জানি না। তবে ওয়েবকিট-এ স্ক্রোল বারগুলি স্টাইল করার মানহীন উপায় রয়েছে (IE অনেক দিন আগে বাদ পড়েছিল)।

Comments

কিন্তু এটি নতুনভাবে রহমতপূর্ণভাবে হ্রাস করে?

— বেন

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

— নোটিডার্ট

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

— উইন্ডসরফ 88

Answer 4

html {
    overflow-y: scroll;
}

তুমি কি এটাই চাও?

দুর্ভাগ্যক্রমে, অপেরা 9.64 প্রয়োগ করা হয় HTMLবা সিএসএস ঘোষণাকে উপেক্ষা করে বলে মনে হয় BODY, যদিও এটি অন্যান্য ব্লক-স্তরের উপাদানগুলির মতো কাজ করে DIV।

Answer 5

html {height: 101%;}

আমি এই ক্রস ব্রাউজারগুলির সমাধানটি ব্যবহার করি (দ্রষ্টব্য: আমি সর্বদা প্রথম লাইনটিতে ডক্টইপিই ঘোষণাটি ব্যবহার করি, আমি জানি না এটি কোয়ার্কস্মোডে কাজ করে কিনা, কখনই এটি পরীক্ষা করা হয়নি )।

এটি সর্বদা প্রতিটি পৃষ্ঠায় একটি ACTIVE উল্লম্ব স্ক্রোল বার দেখায় , উল্লম্ব স্ক্রোলবারটি কেবলমাত্র কয়েকটি পিক্সেলের স্ক্রোলযোগ্য হবে।

যখন পৃষ্ঠাগুলি ব্রাউজারের দৃশ্যমান ক্ষেত্রের চেয়ে কম হবে (দেখুন পোর্ট) আপনি তখনও উল্লম্ব স্ক্রোলবারটি সক্রিয় দেখতে পাবেন এবং এটি কেবলমাত্র কয়েকটি পিক্সেলের মধ্যে স্ক্রোলযোগ্য হবে।

আপনি যদি সিএসএস বৈধতার সাথে আচ্ছন্ন থাকেন তবে এই সমাধানটি ব্যবহার করে আপনার সিএসএস কোডটি ডাব্লু 3 সি-র জন্যও বৈধতা পাবে কারণ আপনি নন স্ট্যান্ডার্ড সিএসএস বৈশিষ্ট্য ব্যবহার করছেন না -moz-scrollbars-vertical

Comments

মার্জিত সমাধান

— আর্তুর কেয়ান

Answer 6

body { height:101%; } বৃহত্তর পৃষ্ঠাগুলি "ক্রপ" করবে।

পরিবর্তে, আমি ব্যবহার:

body { min-height:101%; }

Comments

এই প্রশ্নটি 5 বছর আগে জিজ্ঞাসা করা হয়েছিল এবং এর ইতিমধ্যে একটি স্বীকৃত উত্তর রয়েছে। আপনার উত্তর ইতিমধ্যে গৃহীত উত্তরের চেয়ে ভাল উত্তর সরবরাহ করে না।

— দীপেন শাহ

এই উত্তরটি আসলে অন্যান্য উত্তরগুলিতে সরবরাহ না করা অতিরিক্ত তথ্য সরবরাহ করে।

— গাটেক থমাস

Answer 7

আমি এটি বডি ট্যাগ এ যুক্ত করে কাজ করতে সক্ষম হয়েছি। আমার পক্ষে ভাল ছিল কারণ এইচটিএমএল উপাদানটিতে আমার কিছু নেই।

body {
    overflow-y: scroll;
}

Answer 8

একটি বিকল্প পন্থা হ'ল এইচটিএমএল উপাদানটির প্রস্থকে 100vw এ সেট করা। বেশিরভাগ ব্রাউজার না থাকলেও, এটি প্রস্থে স্ক্রোলবারগুলির প্রভাবকে এড়িয়ে চলে।

html { width: 100vw; }

Answer 9

101% উচ্চতা নির্ধারণ করা আমার সমস্যার সমাধান। ভিউপোর্টের উচ্চতা অতিক্রমকারী এবং এর মধ্যে নেই এমনগুলির মধ্যে স্যুইচ করার সময় আপনার পৃষ্ঠাগুলি আর 'ফ্লিক' করবে না।

Answer 10

body { 
    min-height: 101vh; 
} 

আমার জন্য সবচেয়ে ভাল কাজ করে

Answer 11

আমি এই কাজ:

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

তারপরে যখন প্রয়োজন হয় না তখন আমাকে কুৎসিত গ্রে গ্রেড আউট স্ক্রোলবারের দিকে তাকাতে হবে না।

Comments

প্রশ্নটি সর্বদা দৃশ্যমান হওয়ার জন্য জিজ্ঞাসা করে।

— Corv1nus