التابع `‎‎.scrollLeft()‎`‎ في jQuery

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

`‎.scrollLeft()‎`

القيم المعادة

يعيد عددًا من النوع Number.

الوصف

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

`‎.scrollLeft()‎`

أُضيف مع الإصدار: 1.2.6، ولا يقبل هذا التابع أية وسائط.

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

ملاحظة: لن يعمل التابع ‎.scrollLeft()‎ عندما يستدعى مباشرةً أو يحرك كخاصِّيَّة باستعمال ‎.animate()‎ إن كان العنصر المطبق عليه مخفيًا.

أمثلة

جلب قيمة مضوع شريط التمرير الأفقي لفقرة <p>:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollLeft مثالٌ عن استعمال التابع</title>
  <style>
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>مرحبًا</p><p></p>
 
<script>
var p = $( "p:first" );
$( "p:last" ).text( "scrollLeft: " + p.scrollLeft() );
</script>
 
</body>
</html>

`‎.scrollLeft( value )‎`

القيم المعادة

يعيد كائنًا من النوع jQuery.

الوصف

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

`‎.scrollLeft( value )‎`

أُضيف مع الإصدار: 1.2.6.

عدد صحيح يمثِّل الموضع الجديد المراد تعيينه لشريط التمرير الأفقي.

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

أمثلة

ضبط قيمة موضع شريط التمرير الأفقي (scrollLeft) للعنصر <div>:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollLeft مثالٌ عن استعمال التابع</title>
  <style>
  div.demo {
    background: #ccc none repeat scroll 0 0;
    border: 3px solid #666;
    margin: 5px;
    padding: 5px;
    position: relative;
    width: 200px;
    height: 100px;
    overflow: auto;
  }
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    width: 1000px;
    height: 1000px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div class="demo"><h1>السلام عليكم</h1><p>مرحبًا</p></div>
 
<script>
$( "div.demo" ).scrollLeft( 300 );
</script>
 
</body>
</html>

مصادر

صفحة التابع ‎‎.scrollLeft()‎ في توثيق jQuery الرسمي.