ওভারফ্লো কি: লুকানো প্রয়োগ <body> আইফোন সাফারিতে কাজ করে?

131

না overflow:hiddenপ্রয়োগ <body>আইফোন Safari তে কাজ করে? মনে হয় না। এটি অর্জনের জন্য আমি পুরো ওয়েবসাইটে একটি মোড়ক তৈরি করতে পারি না ...

সমাধান কি জানেন?

উদাহরণ: আমার একটি দীর্ঘ পৃষ্ঠা রয়েছে এবং কেবলমাত্র আমি "ফোল্ড" এর নীচে থাকা সামগ্রীটি আড়াল করতে চাই এবং এটি আইফোন / আইপ্যাডে কাজ করা উচিত।

— ফ্রান্সিসকো
সূত্র

1

এই উত্তরটি নিজেরাই খুঁজতে মরিয়া অনুসন্ধান করছি।

— mwilcox

115

আমার অনুরূপ সমস্যা ছিল এবং আমি দেখতে পেলাম যে overflow: hidden;উভয়কেই প্রয়োগ করা htmlএবং bodyআমার সমস্যার সমাধান করা।

html,
body {
    overflow: hidden;
}

আইওএস 9 এর জন্য আপনার পরিবর্তে এটি ব্যবহার করতে হতে পারে: (ধন্যবাদ ছেনু!)

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}

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

12

এটি আইওএস সাফারিটিতে কাজ করে না। অবস্থান: আপেক্ষিক এছাড়াও প্রয়োজনীয়।

— কেভিন সীমানা

5

হ্যাঁ এইচটিএমএল + বডিতে আপেক্ষিক এবং ওভারফ্লো উভয়ই যুক্ত করুন

— w

3

এটি আইওএস 9 তে কাজ করে না, এমনকি শরীর এবং এইচটিএমএল সম্পর্কিত অবস্থান সম্পর্কিত ব্যবহার করে

— চার্লস জন থম্পসন III

1

সতর্কতার একটি শব্দ, ওভারফ্লো লুকানো <html> ট্যাগে jQuery এর স্ক্রোল ইভেন্টটি ভেঙে যাবে

— ব্রেট গ্রেগসন

2

এটি আইওএস 9, সাফারিতে আমার পক্ষে কাজ করে না। যোগ করার পরেও বডি এখনও স্ক্রোলযোগ্য position: relative।

— এডো

87

body {
  position:relative; // that's it
  overflow:hidden;
}

— laFunk
সূত্র

3

ধন্যবাদ। আপনি. উপাদানগুলি ভিউপোর্টের বাইরে থেকে অভ্যন্তরে স্থানান্তরিত হওয়ার সময় আমার একটি বড় সমস্যা ছিল। সেখানে একটি অদ্ভুত ত্রুটি ঘটবে যেখানে সামগ্রীটি প্রসারিত হয়েছিল। এটাই ছিল আমার সমাধান!

— এরিক

48

আমার ক্ষেত্রে "পজিশন: আপেক্ষিক" যুক্ত করা সাহায্য করে না তবে "পজিশন: ফিক্সড" যুক্ত করে কাজ করে।

— লেস্টঅন

1

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

— moonunit7

মোড়ক কোথায় যায়? এটি কীভাবে সম্পূর্ণ উত্তর?

— কুগেল

8

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

— মাইক 14

27

স্থিতিস্থাপক স্ক্রোলিং প্রসারিত করার সময় এখানে তালিকাভুক্ত কিছু সমাধানের কিছু অদ্ভুত ভুল ছিল। আমি যে ব্যবহার করেছি তা ঠিক করতে:

body.lock-position {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

সূত্র: http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/

— ডেভি
সূত্র

4

এটি দুর্দান্ত (এর চেয়ে আমার ক্ষেত্রে আরও ভাল কাজ করে position: relative) তবে ডিফল্ট স্টাইলিং (যেমন ক্লোজিং মেনু) পুনরুদ্ধারের পরে স্ক্রোল অবস্থানটি হারিয়ে যায়।

— jmarceli

1

স্ক্রোল পজিশনের জন্য আপনি জেএস ব্যবহার করতে পারেন (এই উদাহরণে jquery) এর মতো কিছু করতে পারেন:

// on menu open   // save window pos   $('body').attr( 'data-pos', $(window).scrollTop() ) ;   // ...   // on menu close   // scroll to saved window pos   $( window ).scrollTop( $('body').attr( 'data-pos' ) );

— ডেভি

সত্যিই এটি আমার জন্য টিক!

— ডিস্টেনেল

8

আইওএস 8 এবং 9 এ আজ এই সমস্যাটি ছিল এবং মনে হয় আমাদের এখন উচ্চতা যুক্ত করতে হবে: 100%;

সুতরাং যোগ করুন

html,
body {
  position: relative;
  height: 100%;
  overflow: hidden;
}

— chaenu
সূত্র

4

এখানে উত্তর এবং মন্তব্যগুলির সংমিশ্রণ এবং এই একই প্রশ্নটি এখানে আমার জন্য কাজ করেছিল।

সুতরাং পুরো উত্তর হিসাবে পোস্ট করা।

আপনার সাইটের সামগ্রীতে চারপাশে একটি মোড়ক ডিভি লাগানোর দরকার এখানে <body>।

 <!DOCTYPE HTML>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <!-- other meta and head stuff here -->
 <head>
 <body>
     <div class="wrapper">
         <!-- Your site content here -->
     </div>
 </body>
 </html>

নীচে হিসাবে মোড়ক ক্লাস তৈরি করুন।

.wrapper{
    position:relative; //that's it
    overflow:hidden;
}

আমি এই উত্তর থেকে ধারণা পেয়েছিলাম এখানে ।

এবং এই উত্তরটি এখানে ভাবনার জন্য কিছু খাবার পেয়েছে। এমন কিছু যা সম্ভবত ডেস্কটপ এবং ডিভাইস উভয় ক্ষেত্রে সমানভাবে ভাল কাজ করবে।

— দেবরাজ গাধবী
সূত্র

এটি আমার জন্য সমাধান ছিল।

— রোল ম্যাগডালানো

1

মোডাল বন্ধ হয়ে গেলে এটি পৃষ্ঠাটি আমার জন্য শীর্ষে স্ক্রোল করে causes

— জেসন

4

এটি সাফারি ব্রাউজারে কাজ করছে।

html,
body {
  overflow: hidden;
  position: fixed
}

— শ্রীধর
সূত্র

4

আমার জন্য এটি:

height: 100%; 
overflow: hidden; 
width: 100%; 
position: fixed;

যথেষ্ট ছিল না, আমি সাফারিতে আইওএসে কাজ করি না। আমি যোগ করতে হয়েছিল:

top: 0;
left: 0;
right: 0;
bottom: 0;

এটি ভাল কাজ করতে। এখন ঠিক কাজ করে :)

— Loosie94
সূত্র

2

আমি <body>এবং সঙ্গে কাজ করেছি<div class="wrapper">

পপআপ খুললে ...

<body> 100% উচ্চতা এবং একটি ওভারফ্লো পায়: লুকানো

<div class="wrapper"> অবস্থান পায়: আপেক্ষিক; ওভারফ্লো: লুকানো; উচ্চতা: 100%;

পৃষ্ঠার আসল স্ক্রোলপজিশন পেতে আমি জেএস / জেকিউয়ারি ব্যবহার করি এবং মানটিকে দেহের ডেটা-অ্যাট্রিবিউট হিসাবে সঞ্চয় করি

তারপরে আমি .raraver DIV (উইন্ডোতে নেই) এ স্ক্রোলপজিশনে স্ক্রোল করব

এখানে আমার সমাধান:

জাতীয় / JQuery:

// when popup opens

$('body').attr( 'data-pos', $(window).scrollTop()); // get actual scrollpos
$('body').addClass('locked'); // add class to body
$('.wrapper').scrollTop( $('body').attr( 'data-pos' ) ); // let wrapper scroll to scrollpos

// when popup close

$("body").removeClass('locked');
$( window ).scrollTop( $('body').attr( 'data-pos' ));

সিএসএস:

body.locked {position:relative;overflow:hidden;height:100%;}
body.locked .wrapper {position:relative;overflow:hidden;height:100%;}

এটি উভয় পক্ষে ... ডেস্কটপ এবং মোবাইল (আইওএস) ভাল কাজ করে।

টিপস এবং উন্নতি স্বাগত :)

চিয়ার্স!

— Toge
সূত্র

1

html {
  position:relative;
  top:0px;
  left:0px;
  overflow:auto;
  height:auto
}

এটি আপনার সিএসএসে ডিফল্ট হিসাবে যুক্ত করুন

.class-on-html{
  position:fixed;
  top:0px;
  left:0px;
  overflow:hidden;
  height:100%;
}

পৃষ্ঠাটি কাটাতে এই শ্রেণিটি টগলক্লাস করুন

আপনি যখন এই ক্লাসটি বন্ধ করবেন তখন প্রথম লাইনটি আবার স্ক্রোলিং বারকে কল করবে

— Longwinter
সূত্র

0

হ্যাঁ, এটি সাফারিতে নতুন আপডেটগুলির সাথে সম্পর্কিত যা এখন আপনার লেআউটটি ভেঙে দিচ্ছে যদি আপনি ওভারফ্লো ব্যবহার করেন: ডিভিএস সাফ করার ক্ষেত্রে যত্ন লুকিয়ে।

— লি ম্যাকলি
সূত্র

10

আপনি কি এর সাথে আরও বিশদে যেতে পারেন, বা কোনও উত্স উদ্ধৃত করতে পারেন? এই উত্তরটি সঠিক হতে পারে তবে এটি খুব সহায়ক নয়।

— pjmorse

0

এটি প্রয়োগ হয়, তবে এটি কেবল ডিওএমের মধ্যে থাকা নির্দিষ্ট উপাদানের ক্ষেত্রে প্রযোজ্য। উদাহরণস্বরূপ, এটি কোনও টেবিল, টিডি বা কিছু অন্যান্য উপাদানগুলিতে কাজ করবে না তবে এটি </ strong> ট্যাগে কাজ করবে।
উদাহরণ:

<body>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

কেবল আইওএস ৪.৩ এ পরীক্ষিত।

একটি ছোটখাটো সম্পাদনা: আপনি ওভারফ্লো ব্যবহার করে ভাল হতে পারেন: স্ক্রোল করুন যাতে দুটি আঙুল-স্ক্রোলিং কাজ করে।

— আদম
সূত্র

0

আপনি যে সামগ্রীটি ক্লাসের সাথে কোনও উপাদানের মধ্যে দেখানোতে চান না তা কেন लपेटবেন এবং সেই শ্রেণিটি display:noneকেবল আইফোন এবং অন্যান্য হ্যান্ডহেল্ড ডিভাইসের জন্য বোঝানো স্টাইলশীটে সেট করবেন না?

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->

— S16
সূত্র

0

আমি যা করেছি তা এখানে: আমি শরীরের y অবস্থান পরীক্ষা করি, তারপরে শরীরকে স্থির করে তুলি এবং শীর্ষটিকে সেই অবস্থানের নেতিবাচক সাথে সামঞ্জস্য করি। বিপরীতে, আমি শরীরটিকে স্থির করে তুলি এবং আমার আগে রেকর্ড করা মানটিতে স্ক্রোল সেট করে।

var body_x_position = 0;

function disable_bk_scrl(){

    var elb = document.querySelector('body');

    body_x_position = elb.scrollTop;
    // get scroll position in px

    var body_x_position_m = body_x_position*(-1);
    console.log(body_x_position);

    document.body.style.position = "fixed";

    $('body').css({ top: body_x_position_m });

}

function enable_bk_scrl(){  

    document.body.style.position = "static";

    document.body.scrollTo(0, body_x_position);

    console.log(body_x_position);
}

— অ্যারি এস।
সূত্র

-3

কেবলমাত্র দেহের উচ্চতা <300 px (স্থলপথের মোবাইল ভিউপোর্টের উচ্চতা 300px থেকে 500px প্রায়) পরিবর্তন করুন

জাতীয়

$( '.offcanvas-toggle' ).on( 'click', function() {
    $( 'body' ).toggleClass( 'offcanvas-expanded' );
});

সিএসএস

.offcanvas-expended { /* this is class added to body on click */
    height: 200px;
}
.offcanvas {
    height: 100%;
}

— ক্রিস্টিয়ান লেপি
সূত্র

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

— বদরুশ