এইচটিএমএল iframe - স্ক্রোল অক্ষম করুন

86

আমি আমার সাইটে iframe নিম্নলিখিত:

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>

এবং এটি স্ক্রোলিং বার আছে।
কীভাবে এগুলি থেকে মুক্তি পাবেন?

html css iframe

— মিশা হারমান
সূত্র

6

হারমান - আমার মনে হয় scrolling="no"কাজ করা উচিত ts এটি আমার পক্ষে কাজ করে। এটি কি এইচটিএমএল 5 এ আছে?

— যজ্ঞেশ আগোলা

@ ইয়াগনেশ আমার আইফ্রেমের নমুনা পোস্ট করেছি এবং এটি কাজ করছে না।

— মিশা হারমান

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

— যজ্ঞেশ আগোলা

সম্ভবত আইফ্রেমের ভিতরে <body> স্ক্রোলবারগুলি যুক্ত করছে, এবং <ফ্রেম> নয়?

— অরিয়াদম

166

দুর্ভাগ্যক্রমে আমি বিশ্বাস করি না যে এটি কেবলমাত্র এইচটিএমএল এবং সিএসএস বৈশিষ্ট্য সহ এইচটিএমএল 5 সম্পূর্ণরূপে মেনে চলা সম্ভব। ভাগ্যক্রমে, বেশিরভাগ ব্রাউজার এখনও scrollingসম্পত্তি সমর্থন করে (যা এইচটিএমএল 5 নির্দিষ্টকরণ থেকে সরানো হয়েছিল )।

overflowএইচটিএমএল 5 এর সমাধান নয় যে এটি একমাত্র আধুনিক ব্রাউজার যা ভুলভাবে এটি সমর্থন করে ফায়ারফক্স।

একটি বর্তমান সমাধান দুটি একত্রিত করা হবে:

<iframe src="" scrolling="no"></iframe>

iframe {
  overflow: hidden;
}

তবে এটি ব্রাউজার আপডেট হিসাবে অপ্রচলিত রেন্ডার হতে পারে। আপনি এটি কোনও জাভাস্ক্রিপ্ট সমাধানের জন্য পরীক্ষা করতে চাইতে পারেন: http://www.christersvensson.com/html-tool/iframe.htm

সম্পাদনা: আমি পরীক্ষা করেছি scrolling="no"এবং IE10, ক্রোম 25 এবং অপেরা 12.12 এ কাজ করব।

— জেমস ডোনেলি
সূত্র

4

— লিনাস

4

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

— জেমস ডোনেলি

এটি সঠিক, তবে ক্রোমে এই আইফ্রেমের মধ্যে থাকা উপাদানগুলিতে স্ক্রোলআইটোভিউ ভেঙে ফেলে। কোড. google.com/p/chromium/issues/detail?id=137214

— পিটার ব্র্যান্ড

@ লিনাস - দুর্ভাগ্যক্রমে, এটি কাজ করা উচিত নয় এবং যে ব্রাউজারগুলি এটি কাজ করে তা অ-সঙ্গতিপূর্ণ: বাটন, ফর্ম উপাদান এবং আইফ্রেমের মতো প্রতিস্থাপিত উপাদানগুলিতে ওভারফ্লো প্রয়োগ করা উচিত নয়।

— জিমি ব্রেক - ম্যাককে

4

@ ডানিস্প্রিঞ্জারটি এই বিষয়বস্তুটি কেটে ফেলার জন্য প্রস্তাবিত। স্ক্রোল করার ক্ষমতা ছাড়াই একটি আইফ্রেম লোড করা স্বয়ংক্রিয়ভাবে পুরো চাইল্ড পৃষ্ঠাটিকে নির্ধারিত iframe মাত্রাগুলির সাথে মাপসই করা যায় না।

— Nate

21

আমি এই সিএসএস দিয়ে একই সমস্যাটি সমাধান করেছি:

    pointer-events:none;

— জন স্মিথ
সূত্র

8

মনে হচ্ছে এটি কেবল ভিজ্যুয়াল স্ক্রোলবারগুলি নয়, স্ক্রোল করার শারীরিক প্রয়াসকে অবরুদ্ধ করেছে ...

— LWC

6

এটি স্ক্রলিং সহ ইফ্রামে গুলি চালানোর কোনও মাউস ইভেন্ট রোধ করবে। শক্তিশালী সমাধান হতে খুব প্রশস্ত উপায়

— টম ম্যাকেনজি

foreignobjectএসভিজি ছবিতে এমবেড করা একটি আইফ্রেমে স্ক্রোলিং রোধ করতে আমাকে এটি ব্যবহার করতে হয়েছিল (কেবল overflow: hiddenকাজ হয়নি)

— টিম

এটি মাউস স্ক্রোল হুইল (ক্রোমিয়ামে) মাধ্যমে স্ক্রোলিং বন্ধ করে না। এছাড়াও আমি বিশ্বাস করি ওপি আসলে স্ক্রোল বারগুলি গোপন করতে চায়; আপনার উত্তরটি stackoverflow.com/questions/2712034 এ সরানো উচিত কারণ আমি বিশ্বাস করি যে এটি আংশিকভাবে এই প্রশ্নের সমাধান করে।

— ইওহানম

ধন্যবাদ, কমপক্ষে iframe স্ক্রোলিং অক্ষম আছে।

— সেরেন

11

এটি ব্যবহার করে কাজ করছে বলে মনে হচ্ছে

html, body { overflow: hidden; }

আইফ্রেমের ভিতরে

সম্পাদনা করুন: অবশ্যই এটি কেবলমাত্র কাজ করছে, যদি আপনার যদি ইফ্রেমের সামগ্রীতে অ্যাক্সেস থাকে (যা আমার ক্ষেত্রে রয়েছে)

— অ্যালেক্স
সূত্র

4

যদিও একটি আইফ্রেম ব্যবহার করার সময়, আপনি সাধারণত এতে থাকা অ্যাক্সেস করতে পারবেন না কারণ এটি প্রায়শই অন্য ডোমেনের সামগ্রী অন্তর্ভুক্ত করার জন্য।

— টিম ম্যালোন

2

সমস্ত সামগ্রী এতে সেট করুন:

#yourContent{
 width:100%;
height:100%;  // in you csss
}

বিষয়টি হ'ল iframe স্ক্রোলটি নিজের দ্বারা আইফ্রেমে নয় সামগ্রী দ্বারা সেট করা আছে।

CSS এর সাথে ইন্টিরিয়ারে 100% এবং এইচটিএমএলে iframe এর জন্য পছন্দসই বিষয়বস্তু সেট করুন

— ভার্দে ম্যাক
সূত্র

1

আমি আমার বর্তমান ব্রাউজারে ("গুগল ক্রোম সংস্করণ 60.0.3112.113 (অফিসিয়াল বিল্ড) (-৪-বিট)) এ স্ক্রল করার চেষ্টা করেছি" এবং এটি কার্যকর হয়নি work তবে স্ক্রোল = "না" কাজ করেছিল। চেষ্টা করা মূল্যবান হতে পারে

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe>

— জাচ ইমহোল্টে
সূত্র

4

প্রকৃতপক্ষে, এটিকে আরও খানিকটা খনন করে, আমি মনে করি কারণটি কেবলমাত্র উচ্চতা = "" আমি যে আসল আইফ্রেমটি লোড করার চেষ্টা করছি তার চেয়ে দীর্ঘ হতে হবে changing স্ক্রোলিং অযৌক্তিকভাবে তৈরি করতে উচ্চতা দীর্ঘতর করা আসলে স্ক্রোল বারটি আমার জন্য দূরে সরে যায়। আমি যদিও পুরো পৃষ্ঠাটি প্রদর্শন করার চেষ্টা করছি যা আপনি অর্জন করার চেষ্টা করছেন তার থেকে আলাদা হতে পারে।

— জাচ ইমহোল্টে

এটি প্রশ্নের প্রকৃত উত্তরের চেয়ে কমেন্টের মতো মনে হয়।

4

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

— জাচ ইমহোল্টে

প্রয়োজনীয় প্রতিনিধি না পাওয়া পর্যন্ত আপনি অবদান রাখতে পারেন এমন উপায় রয়েছে। stackoverflow.com/help/whats-reputation

0

আপনার আইফ্রেমে ট্যাগের জন্য এই স্টাইলগুলি যুক্ত করুন ..

overflow-x:hidden;
overflow-y:hidden;

— সসি
সূত্র

8

Overflowএইচটিএমএল 5 আইফ্রেমে কাজ করে না। একমাত্র ব্রাউজার যা ভুলভাবে এটি সমর্থন করে তা হ'ল ফায়ারফক্স।

— জেমস ডোনেলি

4

@ জেমসডোনালি আসলে তিনি এটি নির্দিষ্ট করেননি যে এটি এইচটিএমএল 5, কেন আমরা ওভারফ্লো ব্যবহার করেছি

— সাসি

0

যেহেতু "ওভারফ্লো: লুকানো;" সম্পত্তি আইফ্রেমে নিজেই ঠিকমতো কাজ করে না, তবে আইফ্রেমের ভিতরে পৃষ্ঠার মূল অংশে প্রয়োগ করার সময় ফলাফল দেবে বলে মনে হয় , আমি এটি চেষ্টা করেছি:

iframe body { overflow:hidden; }

কোনটি আশ্চর্যজনক করেনি ফায়ারফক্স দিয়ে কাজ, ঐ বিরক্তিকর স্ক্রোলবারগুলি সরিয়ে ফেলা হয়।

যদিও সাফারিতে, একটি অদ্ভুত 2-পিক্সেল-প্রশস্ত স্বচ্ছ লাইন ইফ্রেমের ডানদিকে উপস্থিত রয়েছে এবং এর সীমানার মধ্যে রয়েছে। অদ্ভুত।

— সেব জেরেবা
সূত্র

0

কেবল নীচের দুটি বিকল্পের মতো একটি আইফ্রেমে স্টাইল যুক্ত করুন। আমি আশা করি এটি সমস্যার সমাধান করে দেয়।

1 ম বিকল্প:

<iframe src="https://www.skyhub.ca/featured-listing" style="position: absolute; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>

২ য় বিকল্প:

<iframe src="https://www.skyhub.ca/featured-listing" style="display: none;" onload="this.style.display='block';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>

— আরশাদুল হোসেন
সূত্র

0

এটি আমার পক্ষে কাজ করে:

<style>
*{overflow:hidden!important;}
html{overflow:scroll!important;}
</style>

দ্রষ্টব্য: আপনার যদি অন্য কোনও উপাদানে স্ক্রোলবারের প্রয়োজন হয় তবে {overflow:scroll!important;}সেই উপাদানটিতে সিএসএস যুক্ত করুন

— কালো আগুন
সূত্র

-1

এই ফ্রেমের জন্য:

    <iframe src="" name="" id=""></iframe>

আমি আমার সিএসএস কোডে এটি চেষ্টা করেছি:

    iframe#put the value of id here::-webkit-scrollbar {
         display: none;
    }

— লুকাস সান্টোস
সূত্র

-1

এইচটিএমএল 5 সংস্করণ নীচে

iframe {
    overflow:hidden;
}

এইচটিএমএল 5 এ

<iframe seamless="seamless"  ....>


iframe[seamless]{

   overflow: hidden;
}

তবে সঠিকভাবে সমর্থিত নয়

— প্রশভ
সূত্র

4

অনুযায়ী এই এবং এই , seamlessঅ্যাট্রিবিউট বৈশিষ্ট থেকে সরিয়ে দেওয়া হয়েছে।

— টিম ম্যালোন

-5

আপনি নিম্নলিখিত সিএসএস কোড ব্যবহার করতে পারেন:

margin-top: -145px; 
margin-left: -80px;
margin-bottom: -650px;

যাতে আইফ্রেমের ভিউ সীমাবদ্ধ করা যায়।

— জিন ন্যুভোলেট
সূত্র

4

কি margin-downএকটি নতুন সম্পত্তি বা বোঝাতে চাইছেন margin-bottom?

— বুর্জন-রজার ক্রিংসজে