ไม่overflow:hiddenนำไปใช้กับ<body>การทำงานบน iPhone Safari? ดูเหมือนจะไม่ใช่ ฉันไม่สามารถสร้าง Wrapper บนเว็บไซต์ทั้งหมดเพื่อให้ได้สิ่งนั้น ...
คุณรู้วิธีแก้ปัญหาหรือไม่?
ตัวอย่าง: ฉันมีหน้ายาวและเพียงต้องการซ่อนเนื้อหาที่อยู่ใต้ "พับ" และควรใช้กับ iPhone / iPad
คำตอบ:
ฉันมีปัญหาที่คล้ายกันและพบว่าการสมัครoverflow: hidden;ทั้งสองอย่างhtmlและbodyแก้ไขปัญหาของฉันได้
html,
body {
overflow: hidden;
} สำหรับ iOS 9 คุณอาจต้องใช้สิ่งนี้แทน: (ขอบคุณ chaenu!)
html,
body {
overflow: hidden;
position: relative;
height: 100%;
}position: relativeร่างกายยังคงเลื่อนยังหลังจากที่เพิ่ม
body {
position:relative; // that's it
overflow:hidden;
}วิธีแก้ปัญหาบางอย่างที่ระบุไว้ที่นี่มีข้อผิดพลาดแปลก ๆ เมื่อยืดการเลื่อนแบบยืดหยุ่น วิธีแก้ไขที่ฉันใช้:
body.lock-position {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}ที่มา: http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/
position: relative) อย่างไรก็ตามตำแหน่งการเลื่อนจะหายไปหลังจากเรียกคืนสไตล์เริ่มต้น (เช่นปิดเมนู)
// 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' ) );
มีปัญหานี้ในวันนี้บน iOS 8 & 9 และดูเหมือนว่าตอนนี้เราต้องเพิ่มความสูง: 100%;
ดังนั้นเพิ่ม
html,
body {
position: relative;
height: 100%;
overflow: hidden;
}รวมคำตอบและความคิดเห็นไว้ที่นี่และคำถามที่คล้ายกันที่นี่ได้ผลสำหรับฉัน
ดังนั้นการโพสต์เป็นคำตอบทั้งหมด
ต่อไปนี้เป็นวิธีที่คุณต้องใส่ Wrapper div รอบเนื้อหาไซต์ของคุณภายใน<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 ตามด้านล่าง
.wrapper{
position:relative; //that's it
overflow:hidden;
}ฉันยังได้แนวคิดจากคำตอบนี้ที่นี่คำตอบที่นี่
และคำตอบนี้ยังมีอาหารสำหรับความคิดอีกด้วย สิ่งที่อาจทำงานได้ดีพอ ๆ กันทั้งในเดสก์ท็อปและอุปกรณ์
มันทำงานในเบราว์เซอร์ Safari
html,
body {
overflow: hidden;
position: fixed
}สำหรับฉันสิ่งนี้:
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;ยังไม่พอฉันไม่ทำงานบน iOS บน Safari ฉันยังต้องเพิ่ม:
top: 0;
left: 0;
right: 0;
bottom: 0;เพื่อให้มันทำงานได้ดี ใช้ได้ดีเลย :)
ฉันเคยทำงานกับ<body>และ<div class="wrapper">
เมื่อป๊อปอัปเปิดขึ้น ...
<body> ได้รับความสูง 100% และล้น: ซ่อนอยู่
<div class="wrapper"> ได้รับตำแหน่ง: ญาติ; ล้น: ซ่อน; ความสูง: 100%;
ฉันใช้ JS / jQuery เพื่อรับการเลื่อนตำแหน่งจริงของหน้าและเก็บค่าเป็น data-attribut to body
จากนั้นฉันเลื่อนไปที่ตำแหน่งเลื่อนใน. wrapper DIV (ไม่ใช่ในหน้าต่าง)
นี่คือทางออกของฉัน:
JS / 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' ));CSS:
body.locked {position:relative;overflow:hidden;height:100%;}
body.locked .wrapper {position:relative;overflow:hidden;height:100%;}ทำงานได้ดีทั้งสองด้าน ... เดสก์ท็อปและมือถือ (iOS)
ยินดีต้อนรับคำแนะนำและการปรับปรุง :)
ไชโย!
html {
position:relative;
top:0px;
left:0px;
overflow:auto;
height:auto
}เพิ่มค่านี้เป็นค่าเริ่มต้นใน css ของคุณ
.class-on-html{
position:fixed;
top:0px;
left:0px;
overflow:hidden;
height:100%;
}toggle จัดคลาสนี้เพื่อตัดหน้า
เมื่อคุณปิดคลาสนี้บรรทัดแรกจะเรียกแถบเลื่อนกลับ
ใช่สิ่งนี้เกี่ยวข้องกับการอัปเดตใหม่ในซาฟารีที่ทำลายเค้าโครงของคุณในขณะนี้หากคุณใช้ overflow: hidden เพื่อดูแลการล้าง div
ใช้งานได้ แต่จะใช้กับองค์ประกอบบางอย่างภายใน DOM เท่านั้น ตัวอย่างเช่นมันจะไม่ทำงานบนตาราง td หรือองค์ประกอบอื่น ๆ แต่จะทำงานบนแท็ก <DIV>
เช่น:
<body>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
ทดสอบใน iOS 4.3 เท่านั้น
การแก้ไขเล็กน้อย: คุณอาจจะดีกว่าเมื่อใช้โอเวอร์โฟลว์: เลื่อนเพื่อให้เลื่อนด้วยสองนิ้วได้ผล
ทำไมไม่รวมเนื้อหาที่คุณไม่ต้องการให้แสดงในองค์ประกอบที่มีคลาสและตั้งค่าคลาสนั้นdisplay:noneเป็นสไตล์ชีทที่มีไว้สำหรับ iPhone และอุปกรณ์มือถืออื่น ๆ เท่านั้น
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->นี่คือสิ่งที่ฉันทำ: ฉันตรวจสอบตำแหน่งของร่างกาย 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);
}เพียงแค่เปลี่ยนความสูงของร่างกาย <300px (ความสูงของวิวพอร์ตมือถือบนแลนด์สเปซอยู่ที่ประมาณ 300px ถึง 500px)
JS
$( '.offcanvas-toggle' ).on( 'click', function() {
$( 'body' ).toggleClass( 'offcanvas-expanded' );
});CSS
.offcanvas-expended { /* this is class added to body on click */
height: 200px;
}
.offcanvas {
height: 100%;
}