সিএসএস ওভারফ্লো-এক্স: দৃশ্যমান; এবং ওভারফ্লো-ওয়াই: লুকানো; স্ক্রোলবার সমস্যা সৃষ্টি করে

Question

ধরুন আপনার কিছু স্টাইল এবং মার্কআপ রয়েছে:

ul
{
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
/* added width so it would work in the snippet */
  width: 100px; 
}
li
{
  display: inline-block;
}

<div>
  <ul>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
  </ul>
</div>

আপনি যখন এটি দেখুন। <ul>নীচে একটি স্ক্রল বার যদিও আমি ওভারফ্লো এক্স / y পর্যন্ত জন্য দৃশ্যমান এবং লুকানো মান নির্দিষ্ট কিছু হয়েছে।

(ক্রোম 11 এবং অপেরা (?) এ পর্যবেক্ষণ করা হয়েছে)

আমি অনুমান করছি যে এখানে কিছু ডব্লু 3 সি স্পেক বা কিছু ঘটতে হবে বলে কিছু আছে তবে আমার জীবনের জন্য আমি কেন কাজ করতে পারছি না।

JSFiddle

আপডেট: - আমি কাছাকাছি জড়িত অন্য উপাদান যুক্ত করে একই ফলাফল অর্জনের একটি উপায় খুঁজে পেয়েছি ul। এটা দেখ.

Comments

আপনার কাঙ্ক্ষিত ফলাফল কি? jsfiddle.net/Kyle_Sevenoaks/3xv6A/2

— কাইল

@ কাইল এটি দেখতে আরও কিছুটা দেখতে হবে: jsfiddle.net/3xv6A/5 দুর্ভাগ্যক্রমে আমি যদি সেট overflow-x hidden;করে রাখি যে এটি স্ক্রোলটি সরিয়ে ফেলেছে তবে আমার সীমানাটি নীচের অংশে লুকানোর জন্য প্রয়োজনীয় উপাদান রয়েছে যাতে এটি পছন্দসই ড্যাশড প্রভাব দেয়। আমি কেন overflow-x: visibleস্ক্রোল বার তৈরি করি তা বুঝতে পারি না । এটা আফাইক করা উচিত নয়।

— জেমস খুরি

@ জেমসখুরি আপনি কি নিজের সমাধানে কিছুটা বিশদ বর্ণনা করতে পারেন? আমি সত্যিই এটি কাজ করতে পারি না

— জর্জ ক্যাটসানোস

@ জর্জক্যাটসানোস এই কর্মসূচী: jsfiddle.net/3xv6A/9 পিতা বা মাতা overflow: hidden;এবং একটি শিশু <ul>সত্তার চারপাশে sertedোকানো উপর নির্ভর করে overflow: visible।

— জেমস খুরি 10:25

@ জেমসখৌরি আপনি কি ভাবেন যে এটি এম্বেড.পিএলএনকিআর.কম

— জর্জ

Answer 1

কিছু গুরুতর অনুসন্ধানের পরে মনে হচ্ছে আমি আমার প্রশ্নের উত্তর খুঁজে পেয়েছি:

থেকে: http://www.brunildo.org/test/Overflowxy2.html

গেকো, সাফারি, অপেরাতে 'দৃশ্যমান' 'অটো' হয়ে ওঠে যখন 'লুকানো' সাথে যুক্ত হয় (অন্য কথায়: 'দৃশ্যমান' 'অটো' হয়ে যায় যখন 'দৃশ্যমান' থেকে আলাদা কোনও কিছুর সাথে মিলিত হয়)। গেকো 1.8, সাফারি 3, অপেরা 9.5 এগুলির মধ্যে বেশ সামঞ্জস্যপূর্ণ।

এছাড়াও W3C এর বৈশিষ্ট বলেছেন:

'ওভারফ্লো-এক্স' এবং 'ওভারফ্লো-ওয়াই' এর গণিত মানগুলি তাদের নির্দিষ্ট মান হিসাবে একই, 'দৃশ্যমান' এর সাথে কিছু সংমিশ্রণ সম্ভব নয়: যদি একটি 'দৃশ্যমান' হিসাবে নির্দিষ্ট করা হয় এবং অন্যটি 'স্ক্রোল' হয় বা 'অটো', তারপরে 'দৃশ্যমান'টিকে' অটো 'তে সেট করা হবে। 'ওভারফ্লো-এক্স' এর গণিত মানের সমান 'ওভারফ্লো' এর গুণিত মান যদি 'ওভারফ্লো-ওয়াই' একই হয়; অন্যথায় এটি 'ওভারফ্লো-এক্স' এবং 'ওভারফ্লো-ওয়াই' এর গণিত মানগুলির জুটি।

সংক্ষিপ্ত সংস্করণ:

আপনি ব্যবহার করে থাকেন visibleপারেন জন্য overflow-xবা overflow-yছাড়া অন্য কিছু visibleঅপরের জন্য, visibleমান হিসাবে ব্যাখ্যা করা হয় auto।

Comments

আমি বুঝতে পারি যে ডাব্লু 3 সি এটি এটিকে নির্দিষ্ট করে তবে এর পিছনে অনুপ্রেরণা কী? আমি এটি বেশ অদ্ভুত এবং বেমানান আচরণ বলে মনে করি, এর ফলে অগোছালো কাজের চারপাশে ঘৃণ্য এইচটিএমএল-উপাদান যুক্ত হওয়া প্রয়োজন।

— এরউইন

@ আরউইন আমি সম্মত, আশা করি কেউ এই সিদ্ধান্তটি আপডেট করার সিদ্ধান্ত নিয়েছে।

— জেমস খুরি

আপনি ঠিক বলেছেন তবে তা কোনও মানে করে না। আপনি এমনকি x এবং y চান এমন সর্বাধিক সাধারণ কারণ আপনি একটি লুকানো এবং অন্যটিকে দৃশ্যমান করতে পারেন।

— 12

এটি পঙ্গু। কেন আমরা দিতে পারি না overflow-x:visibleসময় overflow-y:hiddenএকটি পিতা বা মাতা / সন্তানের হ্যাক ছাড়া? সুন্দর বাজে, আইএমও।

— স্লিঙ্ক

এটি সম্পূর্ণ পঙ্গু। আমি বুটস্ট্র্যাপ ন্যাবারবারের স্ক্রোলগুলিতে আনুভূমিকভাবে স্ক্রোলে বেশ কয়েকটি ড্রপডাউন লিঙ্ক তৈরি করার চেষ্টা করছিলাম, তবে এটি ড্রপডাউনগুলি ভেঙে দেয়, যা নির্ভর করে overflow-y: visible। বুস সিএসএস!

— অ্যান্ডি

Answer 2

আর একটি সস্তা হ্যাক, যা কৌশলটি মনে করছে:

style="padding-bottom: 250px; margin-bottom: -250px;"250আপনার ড্রপডাউন ইত্যাদির জন্য যতগুলি পিক্সেল প্রয়োজন ততগুলি উপস্থাপন করে যে উপাদানটিতে উল্লম্ব ওভারফ্লো কাটঅফ হচ্ছে on

Comments

অনেক ধন্যবাদ, যদিও এটি হ্যাকিং মনে হলেও সমস্যাটি সমাধানের সেরা উপায় বলে মনে হচ্ছে। সিএসএসে ওভারফ্লোগুলি ভয়ানক :(

— সার্জ এরিমিভ

এটি অনুভূমিক স্ক্রোলবারটিকে

— একেবারে

এটি উপাদানটির নীচে 250px এর জন্য পয়েন্টার ইভেন্টগুলিকেও অবরুদ্ধ করে। তবে আমি তার চারপাশে একটি উপায় খুঁজে পেয়েছি এবং এই সমাধানটি আমি ব্যবহার করছি।

— ক্রিস চুডজিকি 20

2 বছর পরে এবং এটি এখনও এই সমস্যার সেরা উত্তর বলে মনে হচ্ছে ... আশা করি ক্রোমিয়াম ওপেন সোর্স প্রকল্পটি আশা করে অন্য কোনও ব্রাউজারের (মাইক্রোসফ্ট এজ) সাহায্যে আমরা ব্রাউজারের বৈশিষ্ট্যগুলির পাশাপাশি উন্নত ব্রাউজারগুলির দ্রুত বিকাশ দেখতে পাব সামঞ্জস্য।

— স্পেনসার ও'রেলি

আমার বিশেষ position: relativeদৃশ্যে , যেখানে মোড়কগুলি অপসারণ বা ব্যবহার করা সম্ভব ছিল না, এটি কেবলমাত্র একমাত্র সমাধান যা কাজ করেছিল, যদিও এটির উপাদানটির অভ্যন্তরে শিশু উপাদানগুলিতে প্রচুর কুৎসিত মার্জিন যুক্ত করার প্রয়োজন ছিল যা আমি overflow-x: hiddenহ্যাকির ক্ষতিপূরণ দিতে চাইছিলাম wanted প্যাডিং। এটি আমাকে বাঁচিয়েছে, তবে, ধন্যবাদ!

— ফিলিপ স্ট্রাটফোর্ড

Answer 3

সাইকেল jQuery প্লাগইন ব্যবহার করার সময় আমি মূলত এটিকে বাইপাস করার জন্য একটি সিএসএস উপায় পেয়েছি। চক্রটি আমার স্লাইডটিতে সেট করতে জাভাস্ক্রিপ্ট ব্যবহার করে overflow: hidden, তাই ছবিগুলিতে আমার ছবিগুলি সেট করার width: 100%সময় উল্লম্বভাবে কাটা দেখতে দেখা হত এবং তাই আমি তাদের বাধ্য হয়ে বাধ্য হয়ে !importantএবং বাক্সের বাইরে স্লাইড অ্যানিমেশনটি এড়াতে এড়িয়ে যাতে আমি overflow: hiddenকন্টেইনার ডিভে সেট করেছিলাম স্লাইড। আশা করি এটা তোমার জন্য কাজ করবে।

আপডেট - নতুন সমাধান:

আসল সমস্যা -> http://jsfiddle.net/xMddf/1/ (আমি overflow-y: visibleএটি ব্যবহার করলেও এটি "স্বয়ংক্রিয়" এবং আসলে "স্ক্রোল" হয়ে যায়))

#content {
    height: 100px;
    width: 200px;
    overflow-x: hidden;
    overflow-y: visible;
}

নতুন সমাধান -> http://jsfiddle.net/xMddf/2/ ( জেমস খুরি একত্রিত করার সমস্যা এবং একটি একক ডিওএম উপাদানকে পরামর্শ দেওয়ার জন্য আমি একটি র‌্যাপার ডিভি ব্যবহার করে overflow-xএবং overflow-yবিভিন্ন ডিওএম উপাদানগুলিতে ব্যবহার করার মত কাজ পেয়েছি ))visiblehidden

#wrapper {
    height: 100px;
    overflow-y: visible;
}
#content {
    width: 200px;
    overflow-x: hidden;
}

Comments

এটি কীভাবে প্রযোজ্য? এটি ওভারফ্লো-এক্স বা ওভারফ্লো-ওয়ায় কাজ করছে বলে মনে হচ্ছে না।

— জেমস খুরি

@ মাকুম্বোমূয়েত্রে এটি পরিষ্কার, ধন্যবাদ +1 এটি আমি যুক্ত "আপডেট" এর অনুরূপ। মূলত আমি মোড়ানোর ডিভটি

— জেমস খুরি

এই সমাধান প্রযোজ্য নয়। প্রশ্নটি হচ্ছে overflow-x:visible;এবং overflow-y:hidden। প্রায় অন্য উপায় না.

— জাকোবস্কি

@TomasJansson @Edward এটা করে কাজ, আপনি শুধু swap 'র আছে যেখানে আপনি আবেদন overflow-xএবং -y: আপডেট বেহালার ।

— একজন শিক্ষার্থী

কোনও কারণে র‌্যাপারটি

— ডেভিড মিস্টার

Answer 4

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

আমার পদ্ধতির পৃথকভাবে প্রয়োগ নিয়ে গঠিত:

• overflow: visibleসাইডবার এলিমেন্টের একটি সম্পত্তি
• একটি overflow-y: autoসম্পত্তি ভেতরের মোড়কের পার্শ্বদন্ডে

দয়া করে নীচের উদাহরণটি দেখুন বা একটি অনলাইন কোডপেন ।

html {
  min-height: 100%;
}
body {
  min-height: 100%;
  background: linear-gradient(to bottom, white, DarkGray 80%);
  margin: 0;
  padding: 0;
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 200px;
  overflow: visible;  /* Just apply overflow-x */
  background-color: DarkOrange;
}

.sidebarWrapper {
  padding: 10px;
  overflow-y: auto;   /* Just apply overflow-y */
  height: 100%;
  width: 100%;
}

.element {
  position: absolute;
  top: 0;
  right: 100%;
  background-color: CornflowerBlue;
  padding: 10px;
  width: 200px;
}

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<div class="sidebar">
  <div class="sidebarWrapper">
    <div class="element">
      I'm a sidebar child element but I'm able to horizontally overflow its boundaries.
    </div>
    <p>This is a 200px width container with optional vertical scroll.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  </div>
</div>

Comments

আমি বেশ নিশ্চিত যে এটি অন্যদের মতো উপস্থাপনার autoপরিবর্তে এর পরিবর্তে একই সমাধান hidden।

— জেমস খুরি

@JamesKhoury কিন্তু এই এক শুধু আমি হৃদয়ঙ্গম করতে সক্ষম নই, কারণ এটি ব্যবহার বাতলান হয়position

— Guichi

Answer 5

আমি ব্যবহৃত content+wrapperপদ্ধতির ... কিন্তু আমি ভিন্ন কিছু এতদূর উল্লিখিত চেয়ে যা করেছে: আমি নিশ্চিত যে আমার মোড়কের এর গণ্ডি হয়নি প্রণীত না বিষয়বস্তুর গণ্ডি সঙ্গে লাইন আপ দিক যে, আমি দৃশ্যমান হতে চেয়েছিলেন মধ্যে ।

গুরুত্বপূর্ণ নোট: এটা সহজ পেতে যথেষ্ট ছিল content+wrapper, same-boundsবিভিন্ন CSS সমন্বয় উপর নির্ভর করে একটি ব্রাউজারে বা অন্য কাজ পদ্ধতির position, overflow-*ইত্যাদি ... কিন্তু আমি কখনো যে পদ্ধতির ব্যবহার তাদের পেতে পারে সব সঠিক (এজ, ক্রোম, সাফারি,। ..)।

তবে যখন আমার মতো কিছু ছিল:

  <div id="hack_wrapper" // created solely for this purpose
       style="position:absolute; width:100%; height:100%; overflow-x:hidden;">
      <div id="content_wrapper"
           style="position:absolute; width:100%; height:15%; overflow:visible;">         
          ... content with too-much horizontal content ... 
      </div>
  </div>

... সমস্ত ব্রাউজার খুশি ছিল।

Answer 6

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

আরও তথ্যের জন্য সিএসএস ট্রিকস থেকে এই পোস্টটি দেখুন - এটি আমার জন্য কাজ করেছে: https://css-tricks.com/popping-hided-overflow/

Comments

তবে উপাদানটির সঠিকভাবে অবস্থান নির্ধারণ করতে কিছু জাভাস্ক্রিপ্টের প্রয়োজন হবে যদি এটি সম্পূর্ণ হয়

— gaurav5430