একটি স্থিত অবস্থান ডিভ করুন যা সামগ্রীতে উপচে পড়লে স্ক্রোল করা দরকার

Question

আমার কাছে দুটি সমস্যা আছে তবে আমি বিশ্বাস করি যে অন্যটির সমাধান করা আরও সহজ as

আমি একটি মেনু জন্য স্ক্রোল বাম দিকে একটি স্থিত অবস্থান ডিভি। ডান দিকটি একটি স্ট্যান্ডার্ড ডিভ যা সঠিকভাবে স্ক্রোল করে। সমস্যাটি হ'ল যখন ব্রাউজারের ভিউ-পোর্টটি পুরো মেনুটি দেখতে খুব ছোট হয় .. আমি খুঁজে পেতে পারি এমন স্ক্রোলটি পাওয়ার কোনও উপায় নেই (কমপক্ষে CSS এর সাথে নয়)। আমি সিএসএসে বিভিন্ন ওভারফ্লো ব্যবহার করার চেষ্টা করেছি, তবে কিছুই ডিভ স্ক্রোল তৈরি করে না। মেনুতে থাকা ডিভটি ন্যূনতম উচ্চতায় সেট করা হয়েছে: 100% এবং অবস্থান: স্থির .. দুটি বৈশিষ্ট্যই আমার রাখা দরকার keep

DIV আছে ধারণকারী মেনু অন্য মোড়কের div যে একেবারে অবস্থিত এবং 100% উচ্চতাকে এতে সেট ভিতরে নেই।

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

এটি আমাকে অন্য ইস্যুতে নিয়ে যায়, যে আমি কোনও স্ক্রোল বারটি প্রদর্শন করতে চাই না .. তবে আমি মনে করি এর উত্তর ইতিমধ্যে থাকতে পারে (কেবল এটি এখনও কাজ করে না কারণ আমি ডিভ স্ক্রোল করতে পারি না) দিয়ে শুরু করতে).

কোন সমাধান? সম্ভবত জাভাস্ক্রিপ্ট দরকার? (যার সম্পর্কে আমি খুব কম জানি)

জেএস ফিডল উদাহরণ

এবং প্রাসঙ্গিক কোড যা সমস্যার সৃষ্টি করছে (যেহেতু এখানে পুরো জিনিসটি পোস্ট করা খুব দীর্ঘ)

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
} 

উচ্চতা যুক্ত করার চেষ্টাও করেছেন: 100% পাশাপাশি কেবল এটি দেখতে সমস্যাটি রয়েছে কিনা তা দেখার জন্য তবে এটি কোনওভাবেই কাজ করে নি ... বা একটি নির্দিষ্ট উচ্চতা যেমন 600px ব্যবহার করে না।

Comments

আপনি বর্তমানে ব্যবহার করছেন এইচটিএমএল এবং সিএসএস সহ একটি jsfiddle পোস্ট করুন যাতে আমরা সমস্যাটি দেখতে পারি। ধন্যবাদ!

— এমচাইল

আপনি কি ওভারফ্লো চেষ্টা করেছেন: অটো; ?

— ড্যান

হ্যাঁ ওভারফ্লো: অটো বা ওভারফ্লো-ওয়াই: স্ক্রোল বা ওভারফ্লো: সমস্ত স্ক্রোল স্থির ডিভকে স্ক্রোল করার অনুমতি দেয় না।

— টিসিডি কারখানার

স্ক্রোলিংয়ের প্রয়োজনীয়তার কারণটি যদি কোনও ডিভের সংজ্ঞায়িত দৈর্ঘ্যে খুব বেশি সামগ্রী থাকে। যদি ব্রাউজার ভিউ পোর্ট সঙ্কুচিত হয় যা ডিভকে কোনওভাবেই কোনও স্ক্রোলিং ক্রিয়াকলাপকে বাধ্য করবে না।

— ড্যান

কোনও জেএসফিডেল এবং এইচটিএমএল / সিএসএস পোস্ট করতে পারে না কারণ এটি কেবলমাত্র দীর্ঘ দীর্ঘ এবং তারা কোড ছাড়াই আপনাকে একটি জেএসফিডাল লিঙ্ক পোস্ট করতে দেয় না। :( আমি কেবল কোডের টুকরো পোস্ট করেছি যা ডিভ স্ক্রোলটিকে সহায়তা করছে বলে মনে হচ্ছে না ... এবং পুরো জিনিসটির লিঙ্ক

— টিসিডি ফ্যাক্টরি

Answer 1

ব্যবহারের height:100%ক্ষেত্রে সমস্যাটি হ'ল এটি উইন্ডোর 100% এর পরিবর্তে পৃষ্ঠাটির 100% হবে (আপনি সম্ভবত এটির প্রত্যাশা করবেন)। এটি আপনি যে সমস্যার মুখোমুখি হচ্ছেন তা সৃষ্টি করবে কারণ অ-স্থির সামগ্রীটি একটি স্ক্রোল বারের প্রয়োজন ছাড়াই 100% উচ্চতার সাথে স্থির সামগ্রীটিকে অন্তর্ভুক্ত করার জন্য যথেষ্ট দীর্ঘ। ব্রাউজারটি জানেন না / যত্ন করে না যে আপনি এটি দেখার জন্য আসলে সেই বারটিকে নীচে স্ক্রোল করতে পারবেন না

আপনি fixedযা করতে চেষ্টা করছেন তা অর্জন করতে আপনি ব্যবহার করতে পারেন ।

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

আপনার ফিডেলের এই কাঁটাচামচটি আমার ফিক্সটি দেখায়: http://jsfiddle.net/strider820/84AsW/1/

Comments

কাজ করছে. একটি কোডড্রপ নিবন্ধের অভিযোজনের জন্য আমার এটি দরকার ছিল। কারও কারও কাছে বাম এবং ডান সেট 0 ব্যবহার করার প্রয়োজন হতে পারে। অনেক ধন্যবাদ, ভাগ্য

— সান্টিয়াগো বাইগরিয়া

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

— ট্রেন

সঠিক। আমি কেবল তার সিএসএস ব্যবহার করছিলাম এবং যা সত্যই ভেঙে গেছে তা ঠিক করছিলাম। যদিও ইতিমধ্যে তার প্রশ্নের সেই বিটের উত্তর আছে বলে মনে হয়েছে।

— strider820

কাজ করছে! দুর্দান্ত সমাধান আমি এখনও নীচটি পাই না: 0 অংশ .. আপনি প্লিজ ব্যাখ্যা করতে পারবেন ??

— Gianluca Ghettini

শীর্ষ যুক্ত করুন: 0 এবং নীচে: 0

— স্থিতিশীল

Answer 2

এখানে উভয় ফিক্স আছে।

প্রথমত, স্থির সাইডবার সম্পর্কিত, এটির ওভারফ্লো করার জন্য আপনাকে এটিকে একটি উচ্চতা দেওয়া দরকার:

এইচটিএমএল কোড:

<div id="sidebar">Menu</div>
<div id="content">Text</div>

সিএসএস কোড:

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;}
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;}
#content {width:80%; padding-left:20%;}

@media screen and (max-height:200px){
    #sidebar {color:blue; font-size:50%;}
}

সরাসরি উদাহরণ: http://jsfiddle.net/RWxGX/3/

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

চিয়ার্স, ইগনাসিও

Comments

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

— টিসিডি কারখানার

এটি পুরানো ব্রাউজারগুলিতে কাজ করে না, যেমন আইওএস 4.2 এর জন্য মোবাইল সাফারি

— মায়াভারগুলি

Answer 3

সাধারণভাবে বলতে গেলে, সংশোধন করা হয়েছে বিভাগের দ্বারা সেট করা উচিত width, heightএবং top, bottomসম্পত্তি, অন্যথায় এটি এর আকার এবং অবস্থান চিনতে পারবে না।

যদি ব্যবহৃত বাক্সটি শরীরের জন্য প্রত্যক্ষ শিশু এবং প্রতিবেশী থাকে তবে এটি চেক করা z-indexএবং top, leftবৈশিষ্ট্যগুলি বোধগম্য হয় , যেহেতু তারা একে অপরকে ওভারল্যাপ করতে পারে, যা সামগ্রীটি স্ক্রোল করার সময় আপনার মাউস হোভারকে প্রভাবিত করতে পারে।

এখানে কোনও সামগ্রী বাক্সের জন্য সমাধান ( bodyট্যাগের প্রত্যক্ষ শিশু ) যা মোবাইল নেভিগেশনের পাশাপাশি সাধারণত ব্যবহৃত হয়।

.fixed-content {
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;
}

আশা করি এটি যে কাউকে সাহায্য করবে। ধন্যবাদ!

Answer 4

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

পার্শ্বদণ্ডের জন্য যদিও কাজ করেছে

.sidebar{
position: sticky;
top: 0;
}

আশা করি এটি কাউকে সাহায্য করবে।

Comments

আমি বহু বছর ধরে সিএসএস সম্পাদনা করছি এবং 'স্টিকি অবস্থান' বৈশিষ্ট্য সম্পর্কে কোনও ধারণা ছিল না। এর জন্য ধন্যবাদ, আমার বাস্তবায়নের জন্যও পুরোপুরি কাজ করেছে!

— 1owk3y

Answer 5

অনুরূপ কিছু করতে চাইলেও যেহেতু আমি চাইছিলাম অনুভূমিক দিকের দিকে উত্তর রেখেছি।

Tweaking @ strider820 মত নিচে যাদু কি করতে হবে এর উত্তর:

.fixed-content {        //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;
}

এটাই. এই মন্তব্যটি দেখুন যেখানে @ ট্রেনoverflow:auto ওভার ব্যবহার করে ব্যাখ্যা করেছে overflow:scroll।