горизонтальная полоса прокрутки внутри контейнера

Question

Я довольно новый для яваскрипта и я пытаюсь создать горизонтальную прокрутку DIV: -

JSfiddle

Как вы можете видеть ссылки меню перейти к каждому цвету, но я бы например, чтобы помещать это в контейнер размером 250x250 пикселей, поэтому отображается только один цвет, затем вы нажимаете на какую-либо ссылку и прокручиваете ее до этого цвета.

Надеюсь, что кто-то может помочь мне с несколькими указателями.

Спасибо!

jQuery(document).ready(function ($) { 
 

 
    $(".scroll").click(function (event) { 
 
     event.preventDefault(); 
 
     $('html,body').animate({ 
 
      scrollLeft: $(this.hash).offset().left 
 
     }, 200); 
 
    }); 
 
});

.container { 
 
    white-space: nowrap; 
 
} 
 
.child-element { 
 
    min-width: 250px; 
 
    display: inline-block; 
 
    height: 250px; 
 
} 
 
.child1 { 
 
    background-color: purple; 
 
} 
 
.child2 { 
 
    background-color: orange; 
 
} 
 
.child3 { 
 
    background-color: black; 
 
} 
 
.child4 { 
 
    background-color: green; 
 
} 
 
.child5 { 
 
    background-color: blue; 
 
} 
 
.child6 { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="#purple" class="scroll">PURPLE</a> 
 
<a href="#orange" class="scroll">ORANGE</a> 
 
<a href="#black" class="scroll">BLACK</a> 
 
<a href="#green" class="scroll">GREEN</a> 
 
<a href="#blue" class="scroll">BLUE</a> 
 
<a href="#red" class="scroll">RED</a> 
 

 
<div class="container"> 
 
    <div id="purple" class="child-element child1"></div> 
 
    <div id="orange" class="child-element child2"></div> 
 
    <div id="black" class="child-element child3"></div> 
 
    <div id="green" class="child-element child4"></div> 
 
    <div id="blue" class="child-element child5"></div> 
 
    <div id="red" class="child-element child6"></div> 
 
</div>

Answer 1

Как @ Script47 упоминалось, вы хотите применить overflow-x как CSS собственности вашего элемента, кроме того, width (действовать как видовой экран). Вот как выглядит ваш окончательный CSS:

.container { 
    white-space: nowrap; 
    overflow-x: scroll; 
    width: 250px; 
    position: relative; 
} 

После этого вам нужно немного изменить свой JS. Вы по-прежнему хотите прокрутить до offset элемента, но вам также нужно будет учитывать текущую позицию scroll.

(Чтобы уточнить, если вы нажали orange - который имеет смещение первоначально из 250px, после анимации, смещение апельсина будет 0px и black бы 250px Если вы выберите black, он будет пытаться прокрутить. до 250px, который является оранжевым элементом.)

Вот что обновленные JS может выглядеть следующим образом:

jQuery(document).ready(function ($) { 

    $(".scroll").click(function (event) { 
     var current = $('.container').scrollLeft(); 
     var left = $(this.hash).position().left;   

     event.preventDefault(); 

     $('.container').animate({ 
      scrollLeft: current + left 
     }, 200); 
    }); 
}); 

скрипку, чтобы продемонстрировать: https://jsfiddle.net/bpxkdb86/4/

Для скрипки, я удалил физическую white-space в HTML (для предотвращения дивы от того места между ними) с использованием <!-- comments -->, а также добавлено position: relative к содержащему элементу (для использования position)

Answer 2

CSS решение, попробуйте добавить это к вам элемент в CSS,

overflow-x: scroll; 

Это должно сделать это для вас.

Answer 3

Для этого вам нужно два изменения.

Сначала добавьте высоту и ширину для контейнера, а затем установите переполнение в css.

width:250px; 
height:250px; 
overflow: auto; 

Второй обновленный jquery для анимации контейнера, теперь он оживляет тело.

$('.single-box').animate({ 

JSFiddle является avaialble в следующей ссылке

https://jsfiddle.net/jym7q0Lu/

Answer 4

просто используйте css, если вы хотите, чтобы ваш div прокручивался ..

.container { 
     white-space: nowrap; 
     overflow-x: scroll; 
     width: 250px; 
     position: relative; 
    }