صعبة للغاية css التمرير السؤال

Question

لست متأكدا من كيفية تحقيق تأثير معين في CSS. لدي HTML التالية:

<div id="container" name="container">
    <div id="scroll" name="scroll"></div>
 </div>

الأحمال Scroller مع صورة واحدة داخل التمرير الذي يحتوي على عرض: 715PX؛

[ [1] ]

عندما ينقر المستخدم على هذه الصورة، يتم إلحاق الصورة الثانية بشكل حيوي إلى الأول:

[ [1] [2] ]

وعندما يتم النقر فوق الثانية، يحدث نفس الشيء (وهلم جرا):

[ [1] [2] [3] ]

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

[ [2] [3] [4] ]
<-------------->

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

[ [3] [4] [5] ]
<-------------->

لقد لعبت مع CSS أدناه (ما تراه هو حالة محاولتي الأخيرة). ما كنت قادرا على تحقيقه هو:

1) تبني الصور على التوالي ثم تجاوز الفائض (إلى اليمين) عندما تتجاوز الصورة الرابعة علامة 715px. ليس ما أريد.

2) CSS أدناه "هل" تفعل ما أريد (نوع) - يبدأ على يسار DIV ثم يعمل على علامة 715PX ويبدأ في دفع الصور (إلى الوراء) إلى اليسار والخروج من الرأي - دائما ترك الصورة الأحدث إلى أقصى اليمين الدف والعرض. المشكلة في هذا هو أن الترتيب ينقل (أعتقد، بسبب RTL). لقد حاولت خداعه مع محاذاة النص: اليسار ولكن هذا لا يبدو أن يفعل أي شيء.

أيه أفكار؟ اقتراحات تقديرية. شكرا.

#container
{
    width: 715px;
    height: 228px;
    overflow: hidden;
    position:relative;
    / * text-align:left; */
}

#scroll
{
    height: 228px;
    white-space: nowrap;
    direction: rtl;
    /* text-align:left; */

} 

Answer 1

لقد صنعت أ صفحة تجريبية. وبعد إنه يعمل بشكل جيد على Firefox، Safari، Opera، IE 8.

انها في الواقع حل JS. سحر يذهب هنا:

document.getElementById('container').scrollLeft = last_img.offsetLeft;

Answer 2

شكرا كل ذلك، أخيرا حصلت على الجواب (لا بد لي من الائتمان "بن ج" لهذا). الخدعة (بالنسبة لي):

Unicode-Bidi: تجاوز Bidi.

هنا هو HTML (مع برنامج نصي لاختبار):

<script type="text/javascript">
var interval = null;
var count = 10;

function addImage()
{
    var container = document.getElementById("imgContainer");
    var img = document.createElement("img");
    img.setAttribute("src", "flowers-100.png");
    container.appendChild(img);

    if (--count == 0) clearInterval(interval);
}

function main()
{
    interval = setInterval("addImage()", 2000);
}

window.onload = main;
        </script>
        <style type="text/css">
            div
            {
                white-space: nowrap;
                overflow: scroll;
                direction: rtl;
                border: 2px solid blue;
                width: 600px;
                height: 110px;
                text-align: left;
            }
            div span
            {
                direction: ltr;
                unicode-bidi: bidi-override;
            }
            img
            {
                margin-right: 10px;
            }
        </style>

وهنا رابط للتنفيذ:

http://www.tidraso.co.uk/misc/imgcontainer/

Answer 3

حسنا، حصلت عليه للعمل في IE، ولكن ليس فايرفوكس:

#container
{
    width: 715px;
    height: 228px;
    border: solid 3px purple;
    overflow:auto;
}
#scroll
{
    height: 223px;
    white-space: nowrap;
    float:right;
    margin-left: -715px;
    border: solid 2px red;
}

أي GSS Gurus هناك تعرف كيف نجعلها تعمل لكليهما؟

Answer 4

سوف شيء مثل هذا العمل:

#container{overflow:hidden;}
#scroll {float:right;min-width:715px;}

لست متأكدا من أن تعمل في IE، ولكن يمكنك تحميل حل الشفرة شيربا في تعليق مشروط لذلك

Answer 5

استخدام CSS محددة ل بمعنى آخر مثل كل شيء آخر في CSS، على سبيل المثال:

#scroll {
    height: 223px;
    white-space: nowrap;
    float:right;
    margin-left: -715px;
    border: solid 2px red; min-width:715px;
}
* html #scroll
{
    min-width: auto;
}

Answer 6

#scroll img {float:left}

Answer 7

يمكنك محاولة مع محاولتك الأولى دون direction:rtl.
ثم في JavaScript الخاص بك تضيف الصورة، وحساب موضع الصورة الجديدة وتعيين scrollLeft على التمرير DIV:

scroll.scrollLeft = theNewImagePosition ;

Answer 8

لقد فعلت هذا للمشروع، وهذا ما فعلته.

[ [img1] [img2] [img3] ]

يتم منح Div الخارجي هذه الصور عرضا يساوي عرض جميع الصور (بما في ذلك الهوامش وغيرها).

ثم يتم استخدام خاصية CSS من "اليسار" لتحويل الصف إلى اليسار:

left: -100px;
overflow: hidden; /* up to you if you need this */

القيمة التي يتم تحويلها إلى اليسار من خلال مثالي هي:

width_of_all_images_plus_margins - width_of_display_area

نأمل أن يساعدني، اسمحوا لي أن أعرف إذا لم أوضح ذلك بما فيه الكفاية ...

Answer 9

ماذا عن div آخر داخل div التمرير الخاص بك مع تعويم اليسار؟ لم جربه، لكنني أتصور أنه يعمل.