css $= - إخفاء شريط التمرير في صفحة HTML




selector class (16)

يمكنك استخدام overflow خاصية CSS -ms-overflow-style مع توليفة مع ::-webkit-scrollbar .

تم اختباره على IE10 + وفايرفوكس وسفاري وكروم ويعمل جيدًا:

.container {
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

هذا حل أفضل بكثير من الآخرين عندما تقوم بإخفاء شريط التمرير مع padding-right ، لأن عرض شريط التمرير الافتراضي يختلف في كل مستعرض.

ملاحظة: في الإصدارات الأخيرة من فايرفوكس -moz-scrollbars-none تم إيقاف خاصية -moz-scrollbars-none ( رابط ).

هل يمكن استخدام CSS لإخفاء شريط التمرير؟ كيف يمكنك أن تفعل هذا؟


يمكنك تحقيق ذلك من خلال div wrapper الذي تم حجبه ، وتم ضبط div الداخلي على auto.

لإزالة شريط التمرير التابع للداخلية ، يمكنك سحبه من إطار العرض الخاص بالباب الخارجي من خلال تطبيق هامش سلبي على div الداخلي. ثم تطبيق المساحة المتساوية على div الداخلي حتى يظل المحتوى في وضع العرض.

JSFiddle

HTML

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

CSS

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

للتأكد من اكتمالها ، يعمل هذا من أجل webkit:

#element::-webkit-scrollbar { 
    display: none; 
}

إذا كنت تريد إخفاء كافة أشرطة التمرير ، استخدم

::-webkit-scrollbar { 
    display: none; 
}

لست متأكدًا من استعادة - وهذا ما نجح ، ولكن قد تكون هناك طريقة صحيحة للقيام بذلك:

::-webkit-scrollbar { 
    display: block; 
}

يمكنك بالطبع استخدام width: 0 ، والذي يمكن استعادته بسهولة باستخدام width: auto ، لكنني لست من المعجبين بإساءة استخدام width لتعديل الرؤية.

لمعرفة ما إذا كان متصفحك الحالي يدعم هذا ، جرّب هذا المقتطف:

.content {
  /* These rules create an artificially confined space, so we get 
     a scrollbar that we can hide. They are not part of the hiding itself. */

  border: 1px dashed gray;
  padding: .5em;
  
  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content::-webkit-scrollbar { 
  /* This is the magic bit */
  display: none;
}
<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

(لاحظ أن هذه ليست إجابة صحيحة على السؤال لأنها تخفي الأشرطة الأفقية أيضًا ، ولكن هذا ما كنت أبحث عنه عندما أشرت إليه شركة Google هنا ، لذا فكنت أحسب أنني سأقوم بنشرها على أي حال).


بلدي أتش تي أم أل هو مثل هذا

<div class="container">
  <div class="content">
  </div>
</div>

أضف هذا إلى div حيث تريد إخفاء شريط التمرير

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /*this can be any value of your choice*/
}

وأضف هذا إلى الحاوية

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}

عبر متصفح النهج لإخفاء شريط التمرير.

اختبار الحافة ، Chrome ، Firefox ، Safari

إخفاء شريط التمرير مع استمرار التمرير باستخدام عجلة الماوس! codepen

/* make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* safari and chrome specific style, don't need to make parent invisible because we can style webkit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* make safari and chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* make the child visible */
#child {
    visibility: visible;
}

سيتم تمرير إجابتي حتى عند overflow:hidden; باستخدام jquery

على سبيل المثال التمرير أفقيًا باستخدام عجلة الماوس:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
 $(function() {

   $("YourSelector").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);

      event.preventDefault();

   });

});
</script>


Set overflow: hidden; على علامة الجسم مثل هذا:

<style type="text/css">
body {
    overflow:hidden;
}
</style>

يخفي الرمز أعلاه شريط التمرير الأفقي والرأسي.

إذا كنت تريد إخفاء شريط التمرير العمودي فقط ، فاستخدم overflow-y :

<style type="text/css">
body {
    overflow-y:hidden;
}
</style>

وإذا كنت تريد إخفاء شريط التمرير الأفقي فقط ، فاستخدم overflow-x :

<style type="text/css">
body {
    overflow-x:hidden;
}
</style>

تحديث: كنت أعني مخفية ، آسف ، استيقظت للتو :-)

ملاحظة: سيتم تعطيل ميزة التمرير أيضًا. يمكنك الرجوع إلى الإجابات أدناه إذا كنت تريد إخفاء شريط التمرير فقط دون ميزة التمرير.


لتعطيل شريط التمرير العمودي ، أضف فقط: overflow-y:hidden;

البحث عن المزيد عن: overflow


إذا كنت تريد التمرير إلى العمل ، قبل إخفاء أشرطة التمرير ، فكر في تصفيفها. تحتوي الإصدارات الحديثة من نظام التشغيل OS X ونظام التشغيل المحمول على أشرطة تمرير ، في حين أنها غير عملية للاستيلاء على الماوس ، فهي جميلة ومُحايدة.

لإخفاء أشرطة التمرير ، تعمل تقنية من قبل جون كورلاك بشكل جيد باستثناء ترك مستخدمي Firefox الذين ليس لديهم لوحات لمس بدون أي إمكانية للتمرير ما لم يكن لديهم ماوس بعجلة ، والتي ربما يقومون بها ، ولكن حتى في هذه الحالة ، يمكنهم عادة التمرير عموديًا فقط .

يستخدم أسلوب جون ثلاثة عناصر:

  • عنصر خارجي لإخفاء أشرطة التمرير.
  • عنصر وسطى لجعل أشرطة التمرير.
  • وعنصر محتوى لكلا تعيين حجم العنصر الأوسط وجعلها تحتوي على أشرطة التمرير.

يجب أن يكون من الممكن ضبط حجم العناصر الخارجية والمحتوى نفسه الذي يزيل استخدام النسب المئوية ، ولكن لا يمكنني التفكير في أي شيء آخر لن يعمل مع التغيير الصحيح.

قلقي الأكبر هو ما إذا كانت جميع إصدارات المتصفحات تضع أشرطة التمرير لإظهار المحتوى الفائض المرئي. لقد اختبرت في المتصفحات الحالية ، ولكن ليس القديمة.

العفو عني SASS ؛ P.

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

اختبارات

OS X هو 10.6.8. ويندوز هو ويندوز 7.

  • فايرفوكس 32.0 أشرطة التمرير مخبأة. لا يتم تمرير مفاتيح الأسهم ، حتى بعد النقر للتركيز ، ولكن يتم تشغيل عجلة الماوس وإصبعين على لوحة التتبع. OS X و Windows.
  • Chrome 37.0 أشرطة التمرير مخفية. مفاتيح الأسهم تعمل بعد النقر للتركيز. عجلة الماوس ولوحة التتبع. OS X و Windows.
  • Internet Explorer 11 Scrollbars hidden. مفاتيح الأسهم تعمل بعد النقر للتركيز. عجلة الماوس يعمل. شبابيك.
  • Safari 5.1.10 أشرطة التمرير مخفية. مفاتيح الأسهم تعمل بعد النقر للتركيز. عجلة الماوس ولوحة التتبع. نظام التشغيل العاشر
  • Android 4.4.4 و 4.1.2. أشرطة التمرير مخبأة. تعمل التمرير باللمس. تمت تجربتها في Chrome 37.0 و Firefox 32.0 و HTMLViewer على 4.4.4 (أيًا كانت). في HTMLViewer ، تكون الصفحة هي حجم المحتوى المقنع ويمكن تمريرها أيضًا! يتفاعل التمرير بشكل مقبول مع تكبير / تصغير الصفحة.

بالإضافة إلى إجابة بطرس:

 #element::-webkit-scrollbar { 
     display: none; 
 }

هذا سيعمل نفسه لـ IE10:

 #element {
      -ms-overflow-style: none;
 }

إذا كنت تبحث عن حل لإخفاء شريط التمرير لأجهزة الجوال ، فاتبع إجابة بطرس !

إليك jsfiddle ، والذي يستخدم الحل أدناه لإخفاء شريط تمرير أفقي.

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

تم اختباره على جهاز كمبيوتر لوحي يعمل بنظام التشغيل Android من خلال Android 4.0.4 (سواء في المتصفح الأصلي أو Chrome) وعلى iPad مع iOS 6 (كلاهما في Safari و Chrome).


أعتقد أنني وجدت عملاً من أجلك يا رفاق إذا كنت لا تزال مهتمًا. هذا هو أول أسبوع لي لكنه عمل بالنسبة لي ..

<div class="contentScroller">
<div class="content">
</div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

نعم ، نوع من ..

عندما تطرح سؤالاً: "هل يمكن إزالة أشرطة التمرير الخاصة بمتصفح بطريقة ما ، بدلاً من إخفاءها ببساطة أو تمويهها" ، سيقول الجميع "غير ممكن" لأنه لا يمكن إزالة أشرطة التمرير من جميع المتصفحات في بطريقة متوافقة ومتقاطعة ، ومن ثم هناك الحجة الكاملة للاستخدام.

ومع ذلك ، من الممكن منع المتصفح من الحاجة إلى إنشاء أشرطة التمرير وعرضها في حالة عدم السماح لصفحتك على الويب بالفائض.

هذا يعني أنه يجب علينا أن نستبدل نفس السلوك الذي عادة ما يفعله المتصفح لنا ونخبر المتصفح بالشكر ولكن لا يشكر الزميل. بدلاً من محاولة إزالة أشرطة التمرير (التي نعلم جميعًا أنها غير ممكنة) ، يمكننا تجنب التمرير (مجديًا تمامًا) والتمرير داخل العناصر التي نقوم بها والتحكم فيها بشكل أكبر.

إنشاء div مع تجاوز مخفي. اكتشاف متى يحاول المستخدم التمرير ولكن غير قادر على ذلك لأننا قمنا بتعطيل قدرة المستعرض على التمرير مع تجاوز السعة: مخفي .. وبدلاً من ذلك قم بتحريك المحتوى باستخدام جافا سكريبت عند حدوث ذلك. وبالتالي خلق التمرير الخاص بنا دون التمرير الافتراضي للمتصفحات أو استخدام البرنامج المساعد مثل iScroll

---

من أجل أن تكون شاملة ؛ كل الطرق الخاصة ببائعي التلاعب في أشرطة التمرير:

انترنت اكسبلورر 5.5+

* لم تكن هذه الخصائص أبدًا جزءًا من مواصفات CSS ، ولم يتم اعتمادها أو بدء البادئة ولكنها تعمل في Internet Explorer و Konqueror. ويمكن أيضًا تعيينها محليًا في ورقة أنماط المستخدم لكل تطبيق. في IE تجده تحت علامة التبويب "إمكانية الوصول" ، في Konqueror تحت علامة التبويب "Stylesheets".

body, html { /* these are default, can be replaced by hex color values */
    scrollbar-base-color: aqua;
    scrollbar-face-color: ThreeDFace;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

اعتبارا من IE8 كانت هذه الخصائص مسبوقة من قبل Microsoft ولكن لم يتم الموافقة عليها من قبل W3C.

-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color 

مزيد من التفاصيل حول Internet Explorer

يوفر IE إمكانية scroll لتحديد ما إذا كان سيتم تعطيل أشرطة التمرير أو تمكينها أم لا. يمكن استخدامه أيضًا للحصول على قيمة موضع أشرطة التمرير.

باستخدام Microsoft Internet Explorer 6 والإصدارات الأحدث ، عند استخدام تعريف! DOCTYPE لتحديد وضع متوافق مع المعايير ، تنطبق هذه السمة على عنصر HTML. عند عدم تحديد وضع المعايير المتوافقة مع المعايير ، كما هو الحال مع الإصدارات السابقة من IE ، تنطبق هذه السمة على عنصر BODY ، وليس عنصر HTML .

تجدر الإشارة أيضًا إلى أنه عند العمل مع .NET فئة ScrollBar في System.Windows.Controls.Primitives في إطار العرض التقديمي مسؤولاً عن تقديم أشرطة التمرير.

http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx

بكت

ملحقات Webkit المتعلقة بتخصيص شريط التمرير هي:

::-webkit-scrollbar {}             /* 1 */
::-webkit-scrollbar-button {}      /* 2 */
::-webkit-scrollbar-track {}       /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {}       /* 5 */
::-webkit-scrollbar-corner {}      /* 6 */
::-webkit-resizer {}               /* 7 */

يمكن الجمع بين كل منها مع محددات زائفة إضافية:

  • :horizontal - ينطبق الفئة الزائفة الأفقية على أي أجزاء شريط تمرير لها اتجاه أفقي.
  • :vertical - تنطبق فئة pseudo-vertical على أي أجزاء شريط التمرير لها اتجاه عمودي.
  • :decrement - تنطبق فئة الزائفة decrement على الأزرار وقطع المسار. يشير إلى ما إذا كان الزر أو جزء المقطع الصوتي سيقلل موضع العرض عند استخدامه (على سبيل المثال ، فوق شريط تمرير عمودي ، يسار على شريط تمرير أفقي).
  • :increment - تنطبق فئة الزائفة الزائدة على الأزرار وقطع المسار. يشير إلى ما إذا كان زر أو قطعة مسار ستزيد من موضع العرض عند استخدامه (على سبيل المثال ، أسفل شريط التمرير العمودي ، مباشرة على شريط التمرير الأفقي).
  • :start - تنطبق فئة pseudo-class على الأزرار وقطع المقاطع الصوتية. يشير إلى ما إذا كان الكائن موضوعًا قبل الإبهام.
  • :end - تنطبق فئة النهاية الزائفة على الأزرار وقطع المسار. يشير إلى ما إذا كان الكائن موضوعًا بعد الإبهام.
  • :double-button مزدوج - ينطبق الزر الزائف المزدوج الزر على الأزرار وقطع المقطع. يتم استخدام الكشف عن ما إذا كان زر جزءًا من زوج من الأزرار معاً في نفس نهاية شريط التمرير. بالنسبة لقطع المقطوعات ، فإنه يشير إلى ما إذا كانت قطعة الجنزير تتاخم زوجًا من الأزرار.
  • :single-button واحد - ينطبق الزر الزائف أحادي الزر على الأزرار وقطع المقطوعة. يتم استخدامه للكشف ما إذا كان زر هو نفسه في نهاية شريط التمرير. بالنسبة لقطع المقطوعات ، فإنه يشير إلى ما إذا كانت قطعة الجنزير تتاخم زرًا أحاديًا.
  • :no-button - ينطبق على تعقب القطع ويشير إلى ما إذا كانت قطعة المسار تعمل إلى حافة شريط التمرير ، أي لا يوجد زر في نهاية هذا المسار.
  • :corner-present - ينطبق على كافة أجزاء شريط التمرير ويشير إلى ما إذا كان ركن شريط التمرير موجودًا أم لا.
  • :window-inactive - ينطبق على كافة أجزاء شريط التمرير ويشير إلى ما إذا كانت النافذة التي تحتوي على شريط التمرير نشطة أم لا. (في النوادي الليلية الأخيرة ، ينطبق هذا النوع الزائف الآن على: اختيار. كذلك نخطط لتوسيعه للعمل مع أي محتوى واقتراحه كطبقة زائفة قياسية جديدة.)

أمثلة على هذه المجموعات

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

مزيد من التفاصيل حول Chrome

addWindowScrollHandler
public static HandlerRegistration addWindowScrollHandler (معالج Window.ScrollHandler)

يضيف معالج Window.ScrollEvent
المعلمات:
معالج - المعالج
عائدات:
إرجاع تسجيل معالج
[ source ] ( http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html#addWindowScrollHandler(com.google.gwt.user.client.Window.ScrollHandler) )

موزيلا

تمتلك Mozilla بعض الإضافات لمعالجة أشرطة التمرير ، لكن يُنصح بعدم استخدامها.

  • -moz-scrollbars-none يوصون باستخدام فيض: مخبأة في مكان هذا.
  • -moz-scrollbars-horizontal مشابهة لـ overflow-x
  • -moz-scrollbars-vertical مشابهة لـ overflow-y
  • -moz-hidden-unscrollable لا يعمل إلا داخليًا ضمن إعدادات ملفات تعريف المستخدمين. تعطيل عناصر جذور XML التمرير وتعطيلها باستخدام مفاتيح الأسهم وعجلة الماوس للتمرير صفحات الويب.

  • Mozilla Developer Docs on 'Overflow'

مزيد من التفاصيل حول موزيلا

هذا ليس مفيدا حقا بقدر ما أعرف ، ولكن تجدر الإشارة إلى أن السمة التي تتحكم في ما إذا كانت أشرطة التمرير معروضة في فايرفوكس هي: ( الرابط المرجعي )

  • السمة: أشرطة التمرير
  • النوع: nsIDOMBarProp
  • الوصف: الكائن الذي يتحكم في ما إذا كان يتم عرض أشرطة التمرير أم لا في النافذة. هذه السمة قابلة للاستبدال في JavaScript. يقرأ فقط

وأخيرًا وليس آخرًا ، فإن الحشو يشبه السحر.

كما سبق ذكره في بعض الإجابات الأخرى ، هنا توضيح يوضح نفسه بما فيه الكفاية.

درس التاريخ

لمجرد أنني أشعر بالفضول ، أردت أن أتعرف على أصل أشرطة التمرير وهذه هي أفضل المراجع التي وجدتها.

متنوع

في مسودة مواصفات HTML5 ، تم تعريف السمة seamless لمنع ظهور أشرطة التمرير في iFrames بحيث يمكن مزجها مع المحتوى المحيط على الصفحة. على الرغم من أن هذا العنصر لا يظهر في آخر مراجعة.

كائن scrollbar BarProp هو طفل كائن window ويمثل عنصر واجهة المستخدم الذي يحتوي على آلية التمرير ، أو بعض مفهوم الواجهة المتشابهة. window.scrollbars.visible سيعود true إذا كانت أشرطة التمرير مرئية.

interface Window {
  // the current browsing context
  readonly attribute WindowProxy window;
  readonly attribute WindowProxy self;
           attribute DOMString name;
  [PutForwards=href] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute UndoManager undoManager;
  Selection getSelection();
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  void close();
  void focus();
  void blur();
  // truncated

تتضمن واجهة برمجة تطبيقات History أيضًا ميزات لاستعادة التمرير في التنقل بالصفحة لاستمرار موضع التمرير عند تحميل الصفحة. يمكن استخدام window.history.scrollRestoration للتحقق من حالة scrollrestoration أو تغيير حالتها (appending ="auto"/"manual" . تعد القيمة التلقائية هي القيمة الافتراضية. تغييرها إلى يدوي يعني أنك بصفتك المطور ستحصل على ملكية أي تغييرات التمرير التي قد تكون مطلوبة عند اجتياز أحد المستخدمين لسجل التطبيق ، وإذا كنت بحاجة إلى ذلك ، فيمكنك تتبع موضع التمرير أثناء دفع إدخالات السجل مع history.pushState ().

---

قراءة متعمقة:

أمثلة


أعتقد أنه يمكنك التلاعب بها باستخدام السمة CSS الفوقية ، لكن لديهم دعم متصفح محدود. قال أحد المصادر أنه كان IE5 + و Firefox 1.5+ و Safari 3+ - ربما يكفي لأغراضك.

يحتوي هذا الرابط على مناقشة جيدة: http://www.search-this.com/2008/03/26/scrolling-scrolling-scrolling/


لا توجد حاليًا أية طريقة لتحديد أصل عنصر في CSS.

إذا كانت هناك طريقة لإجراء ذلك ، فستكون في أي من محددات محددات CSS الحالية:

في غضون ذلك ، سيتعين عليك اللجوء إلى جافا سكريبت إذا كنت بحاجة إلى تحديد عنصر رئيسي.

يتضمن مسودة العمل Selectors Level 4 a :has() فئة زائفة تعمل بنفس طريقة تنفيذ jQuery . اعتبارًا من عام 2018 ، لا يزال هذا غير مدعوم من أي متصفح .

باستخدام :has() يمكن حل السؤال الأصلي مع هذا:

li:has(> a.active) { /* styles to apply to the li tag */ }




css browser scrollbar