আমি কীভাবে IE10 তে স্ক্রোলবার ওভারলেলিং সামগ্রী আটকাতে পারি?

Question

আইই 10 তে, স্ক্রোলবারটি সর্বদা থাকে না ... এবং এটি প্রদর্শিত হলে এটি একটি ওভারলে হিসাবে আসে ... এটি দুর্দান্ত বৈশিষ্ট্যযুক্ত তবে আমি এটি আমার নির্দিষ্ট ওয়েবসাইটের জন্য বন্ধ করতে চাই কারণ এটি একটি সম্পূর্ণ স্ক্রিন অ্যাপ্লিকেশন এবং আমার লোগোগুলি এবং মেনুগুলি এর পিছনে হারিয়ে যায়।

IE10:

chrome:

আই 10 এ স্থিতিতে স্ক্রোলবারটি স্থির করার কোনও উপায় কি কেউ জানেন?

ওভারফ্লো-ওয়াই: স্ক্রোলটি কাজ করছে বলে মনে হচ্ছে না! এটি কেবলমাত্র আমার ওয়েবসাইটে এটি স্থায়ীভাবে রাখে।

এটি বুটস্ট্র্যাপের কারণে সমস্যাটি হতে পারে তবে কোন অংশে আমার কোনও ধারণা নেই! এখানে উদাহরণ দেখুন: http://twitter.github.io/bootstrap/

Comments

আমার আই 10 এর আচরণ নেই, আপনি কি এটি "মেট্রো" অ্যাপ হিসাবে চালাচ্ছেন?

— xec

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

— Jimmyt1988

পৃষ্ঠার সেট প্রস্থের সাথে এটি করার কিছু?

— আলবিজি

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

— জিমিটি 1988

@ জেমসটি আমিও ডাব্লু ৮-তে আছি, তবে এমন কোনও পৃষ্ঠা খুঁজে পাচ্ছি না যা

— আইই

Answer 1

কিছুটা গুগল করার পরে আমি এমন একটি আলোচনায় হোঁচট খেয়েছি যেখানে "নীল কালি" দ্বারা লেখা একটি মন্তব্য বলেছে:

পৃষ্ঠাগুলি পরিদর্শন করে, আমি এটি ব্যবহার করে এটি পুনরুত্পাদন করতে পরিচালিত:

@ -ms-viewport {প্রস্থ: ডিভাইস-প্রস্থ; }

যার ফলে স্ক্রোলবারগুলি স্বচ্ছ হয়ে যায়। বিষয়বস্তু এখন পুরো স্ক্রীনটি গ্রহণ করে, তাই বোঝা যায়।

এই পরিস্থিতিতে, যোগ করা:

ওভারফ্লো-ওয়াই: অটো;

স্ক্রোলবারগুলি স্বতঃ-লুকিয়ে রাখে

এবং বুটস্ট্র্যাপে প্রতিক্রিয়াশীল-ইউটিলিটিস.বিহীন ফাইল, লাইন 21 এ আপনি নিম্নলিখিত সিএসএস কোডটি সন্ধান করতে পারেন

// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

@-ms-viewport {
  width: device-width;
}

এই স্নিপেট হ'ল আচরণের কারণ কি। আমি উপরের মন্তব্য কোডে তালিকাভুক্ত লিঙ্কগুলি পড়ার পরামর্শ দিচ্ছি। (আমি প্রাথমিকভাবে এই উত্তর পোস্ট করার পরে এগুলি যুক্ত করা হয়েছিল))

Comments

আপনি, স্যার, একটি সজ্জন এবং একটি পণ্ডিত! আমি @ -ms-ভিউপোর্ট {প্রস্থ স্থাপন করেছি: অটো! গুরুত্বপূর্ণ;

— c

দুর্দান্ত উত্তর, আমি অন্যদের কাছে সুপারিশ করব যে আপনি বুটস্ট্র্যাপের মন্তব্যে রেফারেন্সযুক্ত নিবন্ধটি পড়েছেন: টিমক্যাডলেক.কম / ২০১২ /১০ / ie10- স্নাপ- মোড- এবং- রেসপন্স - ডিজাইন - বুটস্ট্র্যাপ থেকে সেই কোডটি সরিয়ে ফেললে এতে আই 10 এর প্রতিক্রিয়া ভঙ্গ হতে পারে উইন্ডোজ 8 মেট্রো

— tsimimont

@tmsimont ভাল পয়েন্ট। এছাড়াও, তারা সর্বশেষতম বুস্ট্র্যাপ উত্স ফাইলটিতে মন্তব্যটি পরিবর্তিত করেছে বলে মনে হয়েছে (নতুন মন্তব্যের সাথে আমার উত্তর আপডেট করেছে), এখন এটি " শুধুমাত্র সারফেস / ডেস্কটপ উইন্ডোজ 8" এ প্রয়োগ করার জন্য একটি ইউএ স্নিফিং স্ক্রিপ্ট ব্যবহারের উল্লেখ করেছে - পরীক্ষা করুন ইস্যুটির লিঙ্কটি github.com/twbs/bootstrap/issues/10497

— xec

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

— ডেভিড

-এমএস-ওভারফ্লো-স্টাইল: স্ক্রোলবার; পরিস্কার সমাধান বলে মনে হচ্ছে (দ্বিতীয় উত্তর দেখুন)।

— ম্যানুয়েল আর্কড শ্মিট

Answer 2

এক্সএসি যেমন তার উত্তরে উল্লিখিত হয়েছে, এই আচরণটি @ -ms-ভিউপোর্ট সেটিংসের কারণে ঘটে।

সুসংবাদটি হ'ল স্ক্রোলবারগুলি ফিরে পেতে আপনার এই সেটিংটি সরাতে হবে না (আমাদের ক্ষেত্রে আমরা প্রতিক্রিয়াশীল ওয়েব ডিজাইনের জন্য @ -ms-ভিউপোর্ট সেটিংয়ের উপর নির্ভর করি)।

এই নিবন্ধে উল্লিখিত হিসাবে আপনি ওভারফ্লো আচরণটি সংজ্ঞায়িত করতে -ms-ওভারফ্লো স্টাইলটি ব্যবহার করতে পারেন:

http://msdn.microsoft.com/en-us/library/ie/hh771902(v=vs.85).aspx

স্ক্রোলবারগুলি ফিরে পেতে স্ট্রোলটি স্ক্রোলবারে সেট করুন:

body {
    -ms-overflow-style: scrollbar;
}

স্ক্রল বার

উপাদানটির উপরি প্রবাহিত হওয়ার সময় উপাদানটি ক্লাসিক স্ক্রোলবার-টাইপ নিয়ন্ত্রণ প্রদর্শন করে। -Ms-অটোহাইডিং-স্ক্রোলবারের বিপরীতে, স্ক্রোলবারে -ms-ওভারফ্লো-স্টাইল বৈশিষ্ট্যের সাথে সেট থাকা উপাদানের স্ক্রোলবারগুলি সর্বদা স্ক্রিনে উপস্থিত হয় এবং যখন উপাদানটি নিষ্ক্রিয় থাকে তখন বিবর্ণ হয় না। স্ক্রোলবারগুলি সামগ্রীগুলিকে ওভারলে করে না এবং অতএব যে উপাদানটি প্রদর্শিত হয় তার প্রান্তগুলি সহ অতিরিক্ত বিন্যাসের স্থান গ্রহণ করে।

Comments

আমি এটি এইচটিএমএল উপাদানটিতে যুক্ত করেছি, html{-ms-overflow-style: scrollbar;}এবং এটি আমার পক্ষে কাজ করেছে। অন্য কোথাও এটির দরকার ছিল এমন কোনও মামলা রয়েছে?

— n হ্যাসকিন্স

body{-ms-overflow-style: scrollbar;}আমার জন্য ভাল কাজ করে .. ধন্যবাদ

— মনজিৎ সিং

এই উত্তর হওয়া উচিত। গৃহীত একটি ভিউপোর্ট ডিভাইস অ্যাডাপ্টেশন সরিয়ে দেয়।

— mnsth

এটি

— এক্সে

@ স্টেফান.স এটি সঠিক উত্তর! গ্রহণ করা উচিত

— এয়ারনেইয়াস

Answer 3

সমাধান: দুটি পদক্ষেপ - আইই 10 বলে সনাক্ত করুন, তারপরে CSS ব্যবহার করুন:

এটি init এ করুন:

if (/msie\s10\.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE10');
} else if (/rv:11.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE11');
}

// --OR--

$('body').addClass(
  /msie\s10\.0/gi.test(navigator.appVersion) ? 'IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? 'IE11' :
  ''  // Neither
);

// --OR (vanilla JS [best])--

document.body.className +=
  /msie\s10\.0/gi.test(navigator.appVersion) ? ' IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? ' IE11' :
  '';  // Neither

এই সিএসএস যুক্ত করুন:

body.IE10, body.IE11 {
    overflow-y: scroll;
    -ms-overflow-style: scrollbar;
}

---

এটি কেন কাজ করে:

• overflow-y:scrollস্থায়ীভাবে সক্রিয় <body>ট্যাগ উল্লম্ব স্ক্রোল।
• -ms-overflow-style:scrollbarস্বয়ংক্রিয়ভাবে লুকানো আচরণ বন্ধ হয়ে, এইভাবে উপর বিষয়বস্তু ঠেলাঠেলি এবং আমাদের স্ক্রলবার বিন্যাস আচরণ আমরা সবাই ব্যবহার করছি দেয়।

আইই 11 সম্পর্কে জিজ্ঞাসা করা ব্যবহারকারীদের জন্য আপডেট হয়েছে। - রেফারেন্স https://docs.microsoft.com/en-us/preLive-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

Comments

আপনি কেবল বডি-এমএস-ওভারফ্লো-স্টাইল: স্ক্রোলবার করবেন না কেন? ?

— স্কট রোমাক

-1 আপনার কোড আইই 11 এ কাজ করে না এবং এটি প্রকাশিত হওয়ার পরে এটি আই 12 এ চলে না। আই-নির্দিষ্ট স্টাইলগুলি করার আরও ভাল উপায় রয়েছে।

— জোসেফ লেনাক্স

@ জোসেফলেননক্স আপনি যদি আইই-নির্দিষ্ট স্টাইলগুলি করার আরও ভাল উপায়ের জন্য একটি উত্তর যুক্ত করতে পারেন তবে আমি নিশ্চিত যে এই প্রশ্নটি নিয়ে আসা জিডিবল এবং অন্যান্যরাও তাদের প্রশংসা করবে।

— সুস্পষ্ট সংকলক

"কনসপিসিউসকমপাইলার" -ms- "উপসর্গটি ইতিমধ্যে পর্যাপ্তরূপে এটি কেবল IE করে তোলে।

— জোসেফ লেনাক্স

এটি @ স্টিফান.এস এর উত্তরের মতো, তবে অকারণে ফুটে উঠেছে।

— রাই-

Answer 4

এটা চেষ্টা কর

body{-ms-overflow-style: scrollbar !important;}

Answer 5

এই সমস্যাটি বুটস্ট্রাপ 4-এ ডেটাটেবলের সাথেও ঘটছে Mi এমআই সমাধানটি ছিল:

1. অর্থাৎ ব্রাউজারটি খোলার চেষ্টা করছে কিনা ed
2. টেবিল-প্রতিক্রিয়াশীল-অর্থাৎ শ্রেণীর জন্য টেবিল-প্রতিক্রিয়াশীল শ্রেণি প্রতিস্থাপন করা হয়েছে।

সিএসএস:

.table-responsive-ie {
display: block;
width: 100%;
overflow-x: auto;}

জাতীয়:

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) //If IE
        {
            $('#tableResponsibleID').removeClass('table-responsive');
            $('#tableResponsibleID').addClass('table-responsive-ie');
        }  

Answer 6

@ -Ms-ভিউপোর্ট এবং অন্যান্য পরামর্শগুলি চেষ্টা করেছিলাম তবে উইন্ডোজ on-এ আইইডির সাথে আমার ক্ষেত্রে কোনওটিই কাজ করে নি I আমার অন্যান্য কোনও স্ক্রোল বার ছিল না এবং এখানে অন্যান্য পোস্টগুলি সর্বাধিক আমাকে এমন একটি স্ক্রোল বার দেবে যা ছিল সেখানে থাকা সত্ত্বেও কোথাও স্ক্রল হয়নি didn't প্রচুর পরিমাণে সামগ্রী। এই নিবন্ধটি পাওয়া গেছে http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/ যা হ্রাস পেয়েছে। । ।

body { overflow-x: visible; }

। । । এবং আমার জন্য কৌশলটি।

Comments

প্রশ্নটি নিখোঁজ স্ক্রোলবারগুলি সম্পর্কে নয়, তবে বুটস্ট্র্যাপ ব্যবহারের সময় পার্শ্ব-প্রতিক্রিয়া হিসাবে প্রবর্তিত অর্ধ-স্বচ্ছ স্ক্রোলবারগুলি ওভারলে সম্পর্কে। আপনি চেষ্টা করতে পারেনbody { overflow: auto; }

— xec