Очень хитрый вопрос прокрутки CSS -- css поле с участием scroll поле с участием overflow пол Связанный проблема

Very Tricky CSS Scrolling Question


3
vote

проблема

русский

Я не уверен, как достичь определенного эффекта в CSS. У меня есть следующий HTML:

 <код> <div id="container" name="container">     <div id="scroll" name="scroll"></div>  </div>   

Скроллер нагружает с одним изображением внутри скроллера, который имеет Ширина: 715px;

[[[]]

Когда пользователь нажимает на это изображение, второе изображение динамично Прилагается к первому:

[[1] [2]]

и, когда нажатие второго, то же самое происходит (и так далее):

[[1] [2] [3]]

Теперь, вот где мне нужна помощь. Когда окончательное видимое изображение в Серия нажата, предыдущие изображения должны Прокрутите слева, чтобы освободить место для нового, положив первый Вид и размещение нового изображения в конце как таковое:

[[2] [3] [4]]
& lt; --------------- & gt;

Это происходит на бесконечности - каждый раз, когда окончательное изображение нажат на Предшествующие предшествующие должны прокрутить влево, поместив новый образ на Взгляд вправо в Div.

[[3] [4] [5]]
& lt; --------------- & gt;

Я играл с приведенными ниже 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; */  }    
Английский оригинал

I am not sure how to achieve a certain effect in CSS. I have the following HTML:

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

The scroller loads with one image inside the scroller which has a width: 715px;

[ [1] ]

When the user clicks on that image, a second image is dynamically appended to the first:

[ [1] [2] ]

And, when the second is clicked, the same thing happens (and so on):

[ [1] [2] [3] ]

Now, here is where I need some help. When the final visible image in the series is clicked on, the preceding images should scroll to the left to make room for the new one, putting the first out of view and placing the new image at the end as such:

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

This goes on indefinitely - each time the final image is clicked the preceding ones should scroll to the left, placing the new image at the right-most view within the DIV.

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

I have played with the below CSS (what you see is the state of my most recent attempt). What I have been able to achieve is:

1) The images build consecutively and then overflow (to the right) when the fourth image exceeds the 715px mark. Not what I want.

2) The below CSS "Does" do what I want (sort of) - it starts on the left of the DIV and then works to the 715px mark and starts to push the images (backwards) to the left and out of view - always leaving the most recent image to the far right of the DIV and in view. THE PROBLEM with this is that the order is FLIPPED (I think, due to RTL). I have tried to trick it with text-align:left but that doesn't seem to do anything.

Any Ideas? Suggestions appreciated. Thanks.

#container {     width: 715px;     height: 228px;     overflow: hidden;     position:relative;     / * text-align:left; */ }  #scroll {     height: 228px;     white-space: nowrap;     direction: rtl;     /* text-align:left; */  }  
</div
        
         
         

Список ответов

1
 
vote
vote
Лучший ответ
 

Я сделал Демо-страница . Он хорошо работает на Firefox, Safari, Opera и IE 8.

Это на самом деле решение JS. Магия идет здесь:

 <код> document.getElementById('container').scrollLeft = last_img.offsetLeft;   
 

I've made a demo page. It works well on Firefox, Safari, Opera, and IE 8.

It's actually JS solution. Magic goes here:

document.getElementById('container').scrollLeft = last_img.offsetLeft; 
</div
 
 
1
 
vote

Спасибо всем, я наконец получил ответ (я должен задать «Бен C» для этого). Трюк (для меня был):

Unicode-Bidi: Bidi-aDlede.

Вот 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/

 

Thanks all, I finally got the answer (I have to credit "Ben C" for this). The trick (for me was):

unicode-bidi: bidi-override.

Here is the HTML (with a script for testing):

<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> 

And here is a link to the implementation:

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

</div
 
 
 
 
0
 
vote

Хорошо, я получил его на работу в IE, но не Firefox:

 <код> #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; }   

Любые CSS Guurus там знают, как заставить его работать для обоих?

 

OK, I got it to work in IE, but not Firefox:

#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; } 

Any CSS gurus out there know how to make it work for both?

</div
 
 
 
 
0
 
vote

что-то вроде этой работы:

 <код> #container{overflow:hidden;} #scroll {float:right;min-width:715px;}   

Не уверен, как он будет работать в IE, но вы можете загрузить решение Code Sherpa в условный комментарий для этого

 

would something like this work:

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

Not sure how it would work in ie, but you could load code sherpa's solution in a conditional comment for that

</div
 
 
0
 
vote

Используйте определенные CSS для IE , как все остальное в CSS, например:

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

Use specific CSS for IE like everything else in CSS, for example:

#scroll {     height: 223px;     white-space: nowrap;     float:right;     margin-left: -715px;     border: solid 2px red; min-width:715px; } * html #scroll {     min-width: auto; } 
</div
 
 
0
 
vote
 <код> #scroll img {float:left}   
 
#scroll img {float:left} 
</div
 
 
0
 
vote

Вы можете попробовать с вашей первой попытки без <Код> direction:rtl .
Затем в вашем JavaScript добавляет изображение, рассчитайте положение нового изображения и установите <код> scrollLeft на прокрутке div:

 <код> scroll.scrollLeft = theNewImagePosition ;   
 

You could try with your first attempt without direction:rtl.
Then in your javascript that adds the image, calculate the position of the new image and set scrollLeft on the scroll div:

scroll.scrollLeft = theNewImagePosition ; 
</div
 
 
0
 
vote

Я сделал это для проекта, это то, что я сделал.

 <код> [ [img1] [img2] [img3] ]   

Наружная оберточная обработка этих изображений дана ширина, которая равна ширине всех изображений (включая маржу и т. Д.).

Тогда свойство CSS «Left» используется для сдвига строки влево:

 <код> <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> 0  

Значение, которое оно смещено влево, для моего примера:

 <код> <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> 1  

Надеюсь, что поможет, дайте мне знать, если я не объяснил этого достаточно ...

 

I have done this for a project, this is what I did.

[ [img1] [img2] [img3] ] 

The outer DIV wrapping these images is given a width which is equal to the width of all the images (including margins etc).

Then the css property of 'left' is used to shift the row to the left:

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

The value that it is shifted to the left by, for my example is:

width_of_all_images_plus_margins - width_of_display_area 

Hope that helps, let me know if I haven't explained it enough...

</div
 
 
0
 
vote

Как насчет другого div внутри вашего свитка div с поплавком левый? Не пробовал это, но я бы представлял, что это работает.

 

What about another div inside your scroll div with a float left? Haven't tried it, but I would imagine it works.

</div
 
 
 
 

Связанный проблема

1  HTML / CSS - Center Nav Bar переменных размеров  ( Html css center nav bar of variable size ) 
У меня будет навигационный бар, который позволяет пользователю сортировать галерею картинок. Проблема в том, что ширина панели NAV будет варьироваться в завис...

0  Делайте DIV и его содержание только отзывчиво в ширину?  ( Make div and its content only responsive in width ) 
Прежде всего я немного запутался, но я сделаю все возможное, чтобы объяснить мою проблему и то, что я хочу. У меня есть div, и внутри этого div у меня есть ...

1  Как я могу скрыть десятичные числа правильным образом?  ( How do i hide decimal numbers the correct way ) 
Я использую этот метод, чтобы скрыть десятичные числа на странице. код CSS: <код> span { clip-path: inset(0 2.1ch 0 0); } HTML-код: <код> <span>...

1  Лучший способ получить все даты между datea и dateb  ( Best way to get all dates between datea and dateb ) 
Я использую ASP: Calander, и у меня есть объект, который имеет дату начала и дату окончания. Мне нужно получить все даты между этими двумя датами и размещать ...

-2  Динамический фон WordPress на основе изображений слайдера  ( Dynamic wordpress background based on slider images ) 
Я использую NivoSlider на WordPress, и я хочу, чтобы фона моей домашней страницы измениться на основе текущего изображения слайда! У меня нет опыта работы в J...

1  Правильное форматирование ссылки HTML - можно ли два равна внутри одного тега <a>? [Дубликат]  ( Proper html link formatting can two divs be inside of one a tag ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

30  Почему недвижимость CSS нельзя, не позволяя мне сделать жесткие пробелы в Chrome?  ( Why isnt the css property line height letting me make tight line spaces in ch ) 
У меня есть тег абзаца, который я определил в другом месте с высотой строки 15px, и у меня есть другой тег абзаца дальше вниз по странице, где я хочу сделать ...

0  Делать все изображения того же размера, переопределяя CSS-код  ( Making all images the same size by overriding css code ) 
Я недавно боролся с созданием интернет-магазина. У меня более 1000 изображений, импортированных в интернет-магазин, но все они разные размеры. Я создаю веб-...

3  Применять курсивый стиль на символ трубы  ( Apply italic style to a pipe symbol ) 
Я пытаюсь сделать символ трубы <код> italic Но он не работает там, где другие шрифты отображаются как курсив, я делаю ничего плохого (в Chrome)? <код> <em>...

23  Вопрос с медиа-запросами CSS (Scrollbar)  ( Issue with css media queriesscrollbar ) 
У меня проблемы с CSS Media Query в Firefox. Он работает правильно в Chrome, как я сделал два рав и хотеть прокрутку. Если я уменьшаю размер экрана Firefox до...

0  iPhone 5 симулятор и медиа запрос  ( Iphone 5 simulator and media query ) 
Я видел ответ здесь, как получить медиа-запрос iPhone5 @Media Только экран и (ширина max-Device: 1136px) и (ширина - 960px) и (высота устройства: 640p...

1  Расширение фона с помощью JavaScript  ( Extending a background using javascript ) 
У меня есть страница, которая выглядит так <код> ----------------------------------- | ************* | | ************* ...

0  Как установить стиль один родительский элемент [дубликат]  ( How to set a style one a parent element ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

0  По какой-то причине мой нижний колонтитул не очень мобильный  ( For some reason my footer isnt very mobile friendly ) 
90% моего веб-сайта мобильнее (все равно размера), но по какой-то причине мой нижний колонтитул в основном полностью отрезан на мобильном телефоне. То, как ...

13  Как центрировать текст внутри якоря  ( How to center text inside anchor tag ) 
Я хочу, чтобы мой якорный тег выглядеть как кнопка, и создала этот стиль jsfiddle <код> watch0 Похоже, как я хочу, но как в центре текста горизонтально...

Связанный проблема

1  HTML / CSS - Center Nav Bar переменных размеров 
0  Делайте DIV и его содержание только отзывчиво в ширину? 
1  Как я могу скрыть десятичные числа правильным образом? 
1  Лучший способ получить все даты между datea и dateb 
-2  Динамический фон WordPress на основе изображений слайдера 
1  Правильное форматирование ссылки HTML - можно ли два равна внутри одного тега <a>? [Дубликат] 
30  Почему недвижимость CSS нельзя, не позволяя мне сделать жесткие пробелы в Chrome? 
0  Делать все изображения того же размера, переопределяя CSS-код 
3  Применять курсивый стиль на символ трубы 
23  Вопрос с медиа-запросами CSS (Scrollbar) 
0  iPhone 5 симулятор и медиа запрос 
1  Расширение фона с помощью JavaScript 
0  Как установить стиль один родительский элемент [дубликат] 
0  По какой-то причине мой нижний колонтитул не очень мобильный 
13  Как центрировать текст внутри якоря 



© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.