আইফ্রেমে অনুভূমিক স্ক্রোলবারটি লুকান?

Question

আমার সিএসএস, জ্যাকুয়ারি বা জেএস ব্যবহার করে আইফ্রেমে আনুভূমিক স্কলবারটি আড়াল করা দরকার।

Comments

সম্ভাব্য সদৃশ: সাফারি / ক্রোম (ওয়েবকিট) - আইফ্রেমে উল্লম্ব স্ক্রোলবার এবং অন্যান্যগুলি

— ম্যাট বল

iframe মূল পৃষ্ঠার মতো একই ডোমেনে নেই।

— এন কে সিএমআর

ওভারফ্লো-ওয়াই: লুকানো; গুগল ক্রোম, সাফারি এবং অপেরাতে কাজ করছে না। Jsfiddle.net/m5Btd/3

— phangia2712

Answer 1

আমি একটি সংমিশ্রণ সঙ্গে এটি করার পরামর্শ দিচ্ছি

1. সিএসএস overflow-y: hidden;
2. scrolling="no" (এইচটিএমএল 4 এর জন্য)
3. এবং seamless="seamless"(এইচটিএমএল 5 এর জন্য)*

^{* seamlessবৈশিষ্ট্যটি মান থেকে সরানো হয়েছে এবং কোনও ব্রাউজার এটি সমর্থন করে না।}

---

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}

<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>

Comments

আমি ক্রোম 15 এ আপনার উদাহরণটি লোড করেছি এবং এখনও স্ক্রোলবারগুলি দেখতে পাচ্ছি।

— ড্যান

যোগ করার পদ্ধতি scrolling="no"আইফ্রেম করার অ্যাট্রিবিউট Chrome এ স্ক্রোলবারগুলি অপসারণ বলে মনে হয়।

— নিক

@ নিক এটি কমপক্ষে আমার কম্পিউটারে এটি ক্রোমে সরায় না। img339.imageshack.us/img339/6685/chromelj.png

— l46kok

@ l46kok আপনার স্ক্রিনশটটি এতে অন্তর্ভুক্ত নেইscrolling="no"

— চেজ ফ্লোরেল

মনে রাখবেন যে মনেহীন বৈশিষ্ট্যটি বর্তমানে প্রধান ব্রাউজারগুলির কোনও দ্বারা সমর্থিত নয় । caniuse.com/#feat=iframe-seamless

— লিয়ালি

Answer 2

scrolling="no"আপনার iframe এ অ্যাট্রিবিউট সেট করুন ।

Answer 3

যদি আপনাকে নিজের ভিতরে থাকা দস্তাবেজের কোডটি পরিবর্তন করার অনুমতি দেওয়া হয় iframeএবং কেবলমাত্র এটির মূল উইন্ডো ব্যবহার করে সামগ্রীটি দৃশ্যমান হয় তবে কেবল আপনার সিএসএসে নিম্নলিখিত সিএসএস যুক্ত করুন iframe:

body {
    overflow:hidden;
}

এখানে একটি খুব সাধারণ উদাহরণ:

http://jsfiddle.net/u5gLoav9/

এই সমাধান আপনাকে অনুমতি দেয়:

• আপনাকে এইচটিএমএল 5 বৈধ রাখুন কারণ এতে কোনও scrolling="no"বৈশিষ্ট্যের প্রয়োজন নেই iframe(এইচটিএমএল 5 এ এই বৈশিষ্ট্যটি হ্রাস করা হয়েছে)।

• সিএসএস ওভারফ্লো: লুকানো ব্যবহার করে বেশিরভাগ ব্রাউজারে কাজ করে

• কোনও জেএস বা জিকুয়েরি দরকার নেই।

মন্তব্য:

অনুভূমিকভাবে স্ক্রোল-বারগুলি অস্বীকার করতে, পরিবর্তে এই সিএসএসটি ব্যবহার করুন:

overflow-x: hidden;

Answer 4

এই উত্তরটি কেবলমাত্র সেই ওয়েবসাইটগুলির জন্য প্রযোজ্য যা বুটস্ট্র্যাপ ব্যবহার করে। বুটস্ট্র্যাপের প্রতিক্রিয়াশীল এম্বেড বৈশিষ্ট্যটি স্ক্রোলবারগুলির যত্ন করে।

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div> 

জেএসফিডাল: http://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#responsive-embed