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


97

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

টেক্সট ক্ষেত্রের:

<label>
    <div id="name">
        <textarea name="message" type="text" id="message"
            title="Enter Message Here"
            rows=9 cols=60 maxlength="2000"></textarea>
    </div>
</label>

শৈলী:

#name { 
    border: 1px solid #c810ca;
    width: 270px;
    height:159px;
    overflow: hidden; 
    position: relative;
    }

#message {
    height: 400px;
    width: 235px;
    overflow: hidden;
    position: absolute;
}

উত্তর:


201

overflow: auto(বা overflow-y: auto) হ'ল সঠিক উপায়।

সমস্যাটি হ'ল আপনার পাঠ্য অঞ্চলটি আপনার ডিভের চেয়ে দীর্ঘ। ডিভিটি পাঠ্যবক্সটি কাটা শেষ করে, সুতরাং পাঠ্যবাক্সটির উচ্চতা 159pxযতক্ষণ না লেখাটি লম্বা না হওয়া অবধি স্ক্রোলিং শুরু হবে না এমন মনে হচ্ছে যখন পাঠ্যটি লম্বা হবে তখন স্ক্রোলিং শুরু করা উচিত 400px

এটি ব্যবহার করুন: http://jsfiddle.net/G9rfq/1/

আমি ওভারফ্লো সেট করেছি: পাঠ্য বাক্সে স্বয়ংক্রিয়ভাবে পাঠ্যবাক্সটি ডিভের মতো আকারে তৈরি করেছি।

এছাড়াও আমি এটি একটি আছে বৈধ নয় বিশ্বাস করি না divএকটি ভিতরে label, ব্রাউজার এটা রেন্ডার হবে, কিন্তু এটি কিছু ভীতু কাপড় ঘটতে কারণ হতে পারে। এছাড়াও আপনার divবন্ধ নেই।


যখন আমরা -webkit-scrolbar psuedo উপাদানটি ব্যবহার করে স্ক্রোলবারটি কাস্টমাইজ করেছি তখন এই সমাধানটি কীভাবে কাজ করা যায়। ? কারণ যদি ওভারফ্লো হয় তবে অটো পিচুইডো উপাদানগুলি কাজ করে না .... আমি যখন আমার স্ক্রোলবারটি কাস্টমাইজ করতে চাই তেমনি লুকিয়ে রাখি তখন যখন প্রয়োজন হয় না?
কেপেটেল 1989

4

overflow: auto;বা overflow: hidden;এটা আমার মনে হয় করা উচিত।


আমি যেমন আমার প্রশ্নে বলেছি যে ওভারফ্লো: অটো; কাজ করে না :(
লুকাস

লুকানো স্ক্রোল বারটি আড়াল করে তবে পাঠ্যগুলি
দ্বিখণ্ডিত

আমি এটি পরীক্ষা করেছি এবং এটি ঠিক কাজ করে। আপনি কোন ব্রাউজার ব্যবহার করছেন?
বরিস বাচভস্কি

আমি ফায়ারফক্স ব্যবহার করছি তবে আইই লুকায়িতভাবে স্ক্রোল বারটি দেখায় যদি পাঠ্য
ডিভটি

position: relative;#name div
বোরিস বাচভস্কি

2

.Css ক্লাসে এই ক্লাসটি যুক্ত করুন

.scrol  { 
font: bold 14px Arial; 
border:1px solid black; 
width:100% ; 
color:#616D7E; 
height:20px; 
overflow:scroll; 
overflow-y:scroll;
overflow-x:hidden;
}

এবং ডিভ মধ্যে ক্লাস ব্যবহার করুন। এখানকার মত.

<div> <p class = "scrol" id = "title">-</p></div>

আমি ছবিটি সংযুক্ত করেছি, আপনি উপরের কোডটির আউট পুট দেখতে পাচ্ছেন এখানে চিত্র বর্ণনা লিখুন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.