رأس الصفحة الثابتة يتداخل مع المراسي في الصفحة
https://stackoverflow.com/questions/4086107
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
إذا كان لدي رأس غير موجود في صفحة HTML ، مثبتة على الأعلى ، مع ارتفاع محدد:
هل هناك طريقة لاستخدام مرساة URL ( #fragment جزء) لتمرير المتصفح إلى نقطة معينة في الصفحة ، ولكن لا يزال يحترم ارتفاع العنصر الثابت بدون مساعدة من JavaScript?
http://foo.com/#bar
WRONG (but the common behavior): CORRECT: +---------------------------------+ +---------------------------------+ | BAR///////////////////// header | | //////////////////////// header | +---------------------------------+ +---------------------------------+ | Here is the rest of the Text | | BAR | | ... | | | | ... | | Here is the rest of the Text | | ... | | ... | +---------------------------------+ +---------------------------------+
المحلول
كان لي نفس المشكلة. لقد قمت بحلها عن طريق إضافة فئة إلى عنصر المرساة مع ارتفاع الشريط العلوي كقيمة أعلى الحشو.
<h1><a class="anchor" name="barlink">Bar</a></h1>
ثم ببساطة CSS:
.anchor { padding-top: 90px; }
نصائح أخرى
إذا كنت لا تستطيع أو لا ترغب في تعيين فصل جديد ، فأضف ارتفاعًا ثابتًا ::before العنصر الزائف إلى :target الفئة الزائفة في CSS:
:target::before {
content: "";
display: block;
height: 60px; /* fixed header height*/
margin: -60px 0 0; /* negative fixed header height */
}
أو قم بتمرير الصفحة بالنسبة إلى :target مع jQuery:
var offset = $(':target').offset();
var scrollto = offset.top - 60; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);
أستخدم هذا النهج:
/* add class="jumptarget" to all targets. */
.jumptarget::before {
content:"";
display:block;
height:50px; /* fixed header height*/
margin:-50px 0 0; /* negative fixed header height */
}
يضيف عنصرًا غير مرئي قبل كل هدف. إنه يعمل IE8+.
فيما يلي المزيد من الحلول:http://nicolasgallagher.com/jump-links-and-viewport-position/
أفضل طريقة وجدت للتعامل مع هذه المشكلة هي (استبدل 65 بكسل بارتفاع العنصر الثابت):
div:target {
padding-top: 65px;
margin-top: -65px;
}
إذا كنت لا تحب استخدام استهداف المحدد يمكنك أيضًا القيام بذلك بهذه الطريقة:
.my-target {
padding-top: 65px;
margin-top: -65px;
}
ملاحظة: لن يعمل هذا المثال إذا كان العنصر المستهدف له لون خلفي مختلف عن والديه. فمثلا:
<div style="background-color:red;height:100px;"></div>
<div class="my-target" style="background-color:green;height:100px;"></div>
في هذه الحالة ، سيقوم اللون الأخضر لعنصر الهدف الخاص بي إلى الكتابة فوق العنصر الأحمر والوالد في 65 بكسل. لم أجد أي حل CSS نقي للتعامل مع هذه المشكلة ، لكن إذا لم يكن لديك لون خلفية آخر ، فإن هذا الحل هو الأفضل.
في حين أن بعض الحلول المقترحة تعمل لروابط الأجزاء (= روابط التجزئة) داخل في نفس الصفحة (مثل رابط القائمة الذي يتم تمريره لأسفل) ، وجدت أنه لم يعمل أي منها في الكروم الحالي عندما تريد استخدام روابط الشظايا القادمة من صفحات أخرى.
لذا استدعاء www.mydomain.com/page.html#foo من الصفر ليس تعويض هدفك في الكروم الحالي مع أي من حلول CSS المعطاة أو حلول JS.
هنالك أيضا تقرير علة jQuery وصف بعض تفاصيل المشكلة.
المحلول
الخيار الوحيد الذي وجدته حتى الآن والذي يعمل حقًا في Chrome هو JavaScript الذي لا يطلق عليه OndomReady ولكن مع تأخير.
// set timeout onDomReady
$(function() {
setTimeout(delayedFragmentTargetOffset, 500);
});
// add scroll offset to fragment target (if there is one)
function delayedFragmentTargetOffset(){
var offset = $(':target').offset();
if(offset){
var scrollto = offset.top - 95; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);
}
}
ملخص
من المحتمل أن تعمل حلول تأخير JS في Firefox ، أي Safari ، ولكن ليس في Chrome.
لل Chrome/Safari/Firefox يمكنك إضافة أ display: block واستخدم هامشًا سلبيًا لتعويض الإزاحة ، مثل:
a[name] {
display: block;
padding-top: 90px;
margin-top: -90px;
}
انظر المثال http://codepen.io/swed/pen/rrzbjo
يمكنك القيام بذلك مع jQuery:
var offset = $('.target').offset();
var scrollto = offset.top - 50; // fixed_top_bar_height = 50px
$('html, body').animate({scrollTop:scrollto}, 0);
يمكنك تجربة هذا:
<style>
h1:target { padding-top: 50px; }
</style>
<a href="#bar">Go to bar</a>
<h1 id="bar">Bar</h1>
اضبط قيمة الحشوة العلوية على الارتفاع الفعلي لرأسك. سيؤدي ذلك إلى تقديم فجوة إضافية طفيفة في الجزء العلوي من رأسك ، ولكن سيكون مرئيًا فقط عندما يقفز المستخدم إلى المرساة ثم يقوم بالتمرير لأعلى. لقد قمت بتكوين هذا الحل لموقعي في الوقت الحالي ، لكنه يظهر فقط شريطًا ثابتًا صغيرًا في الجزء العلوي من الصفحة ، لا شيء مرتفع للغاية.
يعمل بالنسبة لي:
رابط HTML إلى المرساة:
<a href="#security">SECURITY</a>
HTML Anchor:
<a name="security" class="anchor"></a>
CSS:
.anchor::before {
content: "";
display: block;
margin-top: -50px;
position: absolute;
}
لقد جعلتها تعمل بسهولة مع CSS و HTML ، باستخدام الطريقة "المرساة: قبل" المذكورة أعلاه. أعتقد أنه يعمل بشكل أفضل ، لأنه لا يخلق حشوة ضخمة بين divs الخاص بك.
.anchor:before {
content:"";
display:block;
height:60px; /* fixed header height*/
margin:-60px 0 0; /* negative fixed header height */
}
لا يبدو أنه يعمل في أول Div على الصفحة ، ولكن يمكنك مواجهة ذلك عن طريق إضافة الحشو إلى هذا Div الأول.
#anchor-one{padding-top: 60px;}
هذا كمان عمل: http://jsfiddle.net/frphe/24/
أنا أستخدم إجابة @jpsy ، لكن لأسباب الأداء ، أقوم فقط بتعيين المؤقت إذا كان التجزئة موجودًا في عنوان URL.
$(function() {
// Only set the timer if you have a hash
if(window.location.hash) {
setTimeout(delayedFragmentTargetOffset, 500);
}
});
function delayedFragmentTargetOffset(){
var offset = $(':target').offset();
if(offset){
var scrollto = offset.top - 80; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);
$(':target').highlight();
}
};
html {
scroll-padding-top: 70px; /* height of sticky header */
}
من: https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
إنه شعور مخترق إلى حد ما لعقلي الناقل ، ولكن كحل CSS فقط ، يمكنك إضافة حشوة إلى العنصر المرتكز النشط باستخدام :target المحدد:
html, body {height:100%; min-height:100%; margin:0;}
body {min-height:200%;}
header {display:inline-block; position:fixed; font-size:1.5em; height:100px; top:0; left:0; right:0; line-height:100px; background:black; text-align:center;}
header a {color:#fff;}
section {padding:30px; margin:20px;}
section:first-of-type, section:target {padding-top:130px;}<header><a href="#one">#One</a> <a href="#two">#two</a> <a href="#three">#three</a></header>
<section id="one"><h1>One</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="two"><h1>Two</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="three"><h1>Three</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>لقد وجدت أنه كان علي استخدام على حد سواء mutttenxd'رمل Badabamحلول CSS معًا ، لأن الأول لم ينجح في Chrome والثاني لم يعمل في Firefox:
a.anchor {
padding-top: 90px;
}
a.anchor:before {
display: block;
content: "";
height: 90px;
margin-top: -90px;
}
<a class="anchor" name="shipping"></a><h2>Shipping (United States)</h2>
...
الطريقة التي أجدها أنظف هي ما يلي:
#bar::before {
display: block;
content: " ";
margin-top: -150px;
height: 150px;
visibility: hidden;
pointer-events: none;
}
واجهت الكثير من المتاعب مع العديد من الإجابات هنا وفي أي مكان آخر لأن المراسي المرجعية الخاصة بي كانت رؤوس قسم في صفحة الأسئلة الشائعة ، لذا فإن تعويض الرأس لم يساعد لأن بقية المحتوى سيبقى فقط في مكانه. لذلك اعتقدت أنني سأشارك.
ما انتهى بي الأمر هو مركب من بعض الحلول:
CSS:
.bookmark { margin-top:-120px; padding-bottom:120px; display:block; }
حيث "120px" هو ارتفاع رأسك الثابت (ربما بالإضافة إلى بعض الهامش).
رابط الإشارة المرجعية HTML:
<a href="#01">What is your FAQ question again?</a>المحتوى المرجعية HTML:
<span class="bookmark" id="01"></span> <h3>What is your FAQ question again?</h3> <p>Some FAQ text, followed by ...</p> <p>... some more FAQ text, etc ...</p>
الشيء الجيد في هذا الحل هو أن span العنصر ليس مخفيًا فحسب ، بل إنه ينهار بشكل أساسي ولا يخرج المحتوى الخاص بك.
لا يمكنني الحصول على الكثير من الفضل في هذا الحل لأنه يأتي من غنيمة من الموارد المختلفة ، لكنها عملت بشكل أفضل بالنسبة لي في وضعي.
يمكنك رؤية النتيجة الفعلية هنا.
كما CSS التمرير SNAP المواصفات يأتي في اللعبة ، من الممكن بسهولة مع scroll-margin-top منشأه. يعمل حاليًا على Chrome و Opera (أبريل 2019). كما يجب أن يدعم Safari 11+ هذا ، لكنني لم أتمكن من تشغيله على Safari 11. ربما يتعين علينا أن ننتظر حتى يصلحه الرجال.
body {
padding: 0;
margin: 0;
}
h1,
p {
max-width: 40rem;
margin-left: auto;
margin-right: auto;
}
h1 {
scroll-margin-top: 6rem; /* One line solution. :-) */
}
.header {
position: sticky;
top: 0;
background-color: red;
text-align: center;
padding: 1rem;
}
.header .scroll {
display: block;
color: white;
margin-bottom: 0.5rem;
}
.header .browsers {
color: black;
font-size: 0.8em;
}<header class="header">
<a class="scroll" href="#heading">Scroll to heading</a>
<span class="browsers" >Chrome 69+, Opera 56+ and Safari 11+ only</span>
</header>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h1 id="heading">What is Lorem Ipsum?</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar eleifend dolor, in cursus augue interdum quis. Morbi volutpat pulvinar nisl et condimentum. Quisque elit lacus, egestas non ante sit amet, hendrerit commodo dui. Nunc ac sagittis dolor. Proin iaculis ante non est pharetra, et ullamcorper nisl accumsan. Aenean quis leo vel sapien eleifend aliquam. Pellentesque finibus dui ex, blandit tristique risus vestibulum vitae. Nam a quam ac turpis porta eleifend. Sed at hendrerit risus, ac efficitur ante. Aenean pretium justo feugiat condimentum consectetur. Etiam mattis urna id porta hendrerit.
</p>
<p>
Mauris venenatis quam sed egestas auctor. Fusce lacus eros, condimentum nec quam vel, malesuada gravida libero. Praesent vel sollicitudin justo. Donec mattis nisl id mauris scelerisque, quis placerat lectus scelerisque. Ut id justo a magna mattis luctus. Suspendisse massa est, pretium vel suscipit sit amet, iaculis at mi. Aenean vulputate ipsum non consectetur sodales. Proin aliquet erat nec mi eleifend, eu dapibus enim ultrices. Sed fringilla tortor ac rhoncus consectetur. Aliquam aliquam orci ultrices tortor bibendum facilisis.
</p>
<p>
Donec ultrices diam quam, non tincidunt purus scelerisque aliquam. Nam pretium interdum lacinia. Donec sit amet diam odio. Donec eleifend nibh ut arcu dictum, in vulputate magna malesuada. Nam id dignissim tortor. Suspendisse commodo, nunc sit amet blandit laoreet, turpis nibh rhoncus mi, et finibus nisi diam sed erat. Vivamus diam arcu, placerat in ultrices eu, porta ut tellus. Aliquam vel nisi nisi.
</p>
<p>
Integer ornare finibus sem, eget vulputate lacus ultrices ac. Vivamus aliquam arcu sit amet urna facilisis consectetur. Sed molestie dolor et tortor elementum, nec bibendum tortor cursus. Nulla ipsum nulla, luctus nec fringilla id, sagittis et sem. Etiam at dolor in libero pharetra consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse quis turpis non diam mattis varius. Praesent at gravida mi. Etiam suscipit blandit dolor, nec convallis lectus mattis vitae. Mauris placerat erat ipsum, vitae interdum mauris consequat quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Nunc efficitur scelerisque elit. Integer ac massa ipsum. Cras volutpat nulla purus, quis molestie dolor iaculis eget. Maecenas ut ex nulla. Pellentesque sem augue, ornare ut arcu eu, porttitor consectetur orci. Aenean iaculis blandit quam, in efficitur justo sodales auctor. Vivamus dignissim pellentesque risus eget consequat. Pellentesque sit amet nisi in urna convallis egestas vitae nec mauris.
</p>نهج تدخلي الحد الأدنى باستخدام jQuery:
نهاية لهذه الغاية:
<a href="#my-anchor-1" class="anchor-link">Go To Anchor 1</a>
محتوى:
<h3 id="my-anchor-1">Here is Anchor 1</a>
النصي:
$(".anchor-link").click(function() {
var headerHeight = 120;
$('html, body').stop(true, true).animate({
scrollTop: $(this.hash).offset().top - headerHeight
}, 750);
return false;
});
من خلال تعيين فئة الارتباط المرساة إلى الروابط ، لا يتأثر سلوك الروابط الأخرى (مثل أدوات التحكم في الأكورديون أو علامات التبويب).
السؤال لا يريد javaScript ولكن السؤال الآخر الأكثر شعبية مغلق بسبب هذا واحد ولم أستطع الإجابة هناك.
كنت بحاجة إلى شيء يناسب الروابط الواردة ، والروابط في الصفحة ، ويمكن استهدافها بواسطة JS حتى تتمكن الصفحة من الاستجابة للتغييرات في ارتفاع الرأس
لغة البرمجة
<ul>
<li><a href="#ft_who">Who?</a></li>
<li><a href="#ft_what">What?</a></li>
<li><a href="#ft_when">When?</a></li>
</ul>
...
<h2 id="ft_who" class="fragment-target">Who?</h2>
...
<a href="#">Can I be clicked?</a>
<h2 id="ft_what" class="fragment-target">What?</h2>
...
<h2 id="ft_when" class="fragment-target">When?</h2>
CSS
.fragment-target {
display: block;
margin-top: -HEADER_HEIGHTpx;
padding-top: HEADER_HEIGHTpx;
z-index: -1;
}
ال z-index: -1 يسمح بالروابط في "منطقة الحشو" أعلى من أجزاء الهدف لتكون قابلة للنقر ، كما علقها muttenxd على إجابته
لم أجد مشكلة حتى الآن في IE 11 أو Edge 15+ أو Chrome 38+ أو FF 52+ أو Safari 9.1+
لم يكن لدي أي حظ مع الإجابة المذكورة أعلاه وانتهى الأمر باستخدام هذا الحل الذي عمل بشكل مثالي ...
قم بإنشاء فترة فارغة حيث تريد ضبط مرساةك.
<span class="anchor" id="section1"></span>
<div class="section"></div>
وتطبيق الفصل التالي:
.anchor {
display: block;
height: 115px; /* same height as header */
margin-top: -115px; /* same height as header */
visibility: hidden;
}
سيعمل هذا الحل حتى لو كان للأقسام خلفيات ملونة مختلفة! لقد وجدت الحل في هذا الرابط.
<div style="position:relative; top:-45px;">
<a name="fragment"> </a>
</div>
هذا الرمز يجب أن يفعل الخدعة. تبديل 45 بكسل لارتفاع شريط الرأس الخاص بك.
تحرير: إذا كان استخدام jQuery خيارًا ، فقد نجحت أيضًا في استخدام jQuery.localsCroll مع مجموعة قيمة الإزاحة. خيار الإزاحة هو جزء من jQuery.scrollto ، والذي تم بناء jquery.localscroll. العرض التوضيحي متاح هنا: http://demos.flesler.com/jquery/scrollto/ (النافذة الثانية ، تحت "الإزاحة")
فيما يلي حل jQuery كامل سيعمل في IE:
لنفترض أن عناصر شريط التنقل هي شيء من هذا القبيل:
<ul>
<li><a class="navigation" href="/#contact-us">Contact us</a></li>
<li><a class="navigation" href="/#about-us">About us</a></li>
</ul>
يمكنك استخدام مقتطف jQuery التالي لتعويض التمرير:
$(function() {
$("a.navigation").click(function(event) {
event.preventDefault();
offSetScroll($(this));
});
offSetScrollFromLocation(window.location.href.toLowerCase());
});
function offSetScroll(anchor) {
var href = anchor.attr("href");
offSetScrollFromLocation(href);
}
function offSetScrollFromLocation(href) {
//Change this according to the height of the navigation bar
var fromTop = 250;
if(href.indexOf("#")<=0)
return;
var hash=href.substring(href.indexOf("#"));
var targetOffset = $(hash).offset().top-fromTop;
$('html, body').animate({scrollTop: targetOffset}, 400, function(e) {
});
}
نفذت باستخدام :before عملت بشكل رائع حتى أدركنا أن العنصر الزائف كان في الواقع يغطي وحظر أحداث المؤشر التي جلس داخل منطقة العنصر الزائف. باستخدام شيء مثل pointer-events: none على ال :before أو حتى مباشرة على المرساة لم يكن لها أي تأثير.
ما انتهى بنا الأمر هو جعل وضع المرساة مطلقة ثم ضبط وضعه ليكون إزاحة/ارتفاع المنطقة الثابتة.
مرساة الإزاحة دون منع أحداث المؤشر
.section-marker {
position: absolute;
top: -300px;
}
القيمة مع هذا هي أننا لا نمنع أي عناصر قد تندرج ضمن تلك 300 بكسل. الجانب السلبي هو أن الاستيلاء على موضع هذا العنصر من JavaScript يحتاج إلى مراعاة هذا الإزاحة بحيث يجب تعديل أي منطق هناك.
هذه هي الطريقة التي حصلت عليها أخيرًا إلى المكان المناسب عند النقر فوق التنقل. أضفت معالج الحدث لنقرات التنقل. ثم يمكنك فقط استخدام "Scrollby" للتنقل على الإزاحة.
var offset = 90;
$('.navbar li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
لقد قمت بإنشاء Div مع بضع فترات من الأسطر وأعطيت المعرف ، ثم وضعت الرمز الذي أردت عرضه أسفله. ثم يأخذك الرابط إلى المساحة فوق الصورة ولم يعد الرأس في الطريق:
<a href="#image">Image</a>
<div id="image"><br><br></div>
<img src="Image.png">
بالطبع ، يمكنك تغيير عدد استراحات الأسطر لتناسب احتياجاتك. لقد نجح هذا الأمر تمامًا بالنسبة لي ، لست متأكدًا مما إذا كانت هناك أي مشاكل ، ما زلت أتعلم HTML.
استخدم هذا البرنامج النصي
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top -140
}, 1000);
});
// handle hashes when page loads
// <http://stackoverflow.com/a/29853395>
function adjustAnchor() {
const $anchor = $(':target');
const fixedElementHeight = $('.navbar-fixed-top').outerHeight();
if ($anchor.length > 0)
window.scrollTo(0, $anchor.offset().top - fixedElementHeight);
}
$(window).on('hashchange load', adjustAnchor);
$('body').on('click', "a[href^='#']", function (ev) {
if (window.location.hash === $(this).attr('href')) {
ev.preventDefault();
adjustAnchor();
}
});
أستخدم هذه الطريقة لأنه لسبب ما ، لم يعمل لي أي من الحلول الأخرى المقترحة بالفعل. أعدك أنني حاولت.
section {
position: relative;
border-top: 52px solid transparent; /* navbar height +2 */
margin: -30px 0 0;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
section:before {
content: "";
position: absolute;
top: -2px;
left: 0;
right: 0;
border-top: 2px solid transparent;
}
يحل محل الجزء بواسطة فصل إذا كنت تفضل.
مصدر: روابط القفز وتحديد موقع المنفذ
- تم اختباره على Firefox 45 و Chrome 52.
- إصدار bootstrap: 3.3.7
بالنسبة لأولئك الذين لا يصدقونني ، يرجى إعداد JSfiddle مع الحل في ذلك: المحلول
سوف تكون خدعة CSS حل بديل. يمكن تنفيذ الحل المناسب الذي سيعمل في جميع السيناريو باستخدام jQuery.
تشير إلى https://codepen.io/pikeshmn/pen/mmxedz
يقترب: نحصل على ارتفاع NAV الثابت باستخدام document.getElementByid ('header'). Offsetheightوتعويض التمرير إلى هذه القيمة.
var jump=function(e){
e.preventDefault(); //prevent "hard" jump
var target = $(this).attr("href"); //get the target
//perform animated scrolling
$('html,body').animate(
{
scrollTop: $(target).offset().top - document.getElementById('header').offsetHeight - 5 //get top-position of target-element and set it as scroll target
},1000,function() //scrolldelay: 1 seconds
{
location.hash = target; //attach the hash (#jumptarget) to the pageurl
});
}
$(document).ready(function()
{
$('a[href*="#"]').bind("click", jump); //get all hrefs
return false;
});
ملاحظة:
- يتضمن فرقًا لطيفًا 5 بكسل بين الرأس والهدف
- تأثير التمرير ليس صعبًا وسلسًا إلى حد ما. التمرير السلس
