在div內部水平居中，溢出：自動

Question

我正在創建類似時間軸的內容，到目前為止，我有以下代碼：

  $("#time-line-selector ul li a").click(function(event) { event.preventDefault(); $("#time-line-selector ul li a").removeClass("active"); $(this).addClass("active"); var yearId = $(this).attr("data-id-selector"); $("#time-line-container ul").animate({ "margin-left": - ( (yearId - 1) * timeLineContentWidth) }, 1000); }); 

 #time-line-selector{ width: 100%; margin: 30px 0 0 0; overflow: auto; } #time-line-selector ul{ margin: 0 auto; padding: 0; } #time-line-selector ul li{ float: left; margin: 0; list-style: none; position: relative; } #time-line-selector ul li a{ display: block; position: relative; background: #ffffff; margin: 8px 0 0 0; padding: 16px 10px 8px 10px; color: #aeaeae; font-size: 17px; text-decoration: none; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } #time-line-selector ul li a:before{ display: block; content: ""; position: absolute; background: #e1e1e1; top: 0; left: 0; margin: 0px 0 0 0px; width: 100%; height: 1px; border-radius: 50%; } #time-line-selector ul li a:after{ display: block; content: ""; position: absolute; background: #aeaeae; top: 0; left: 50%; margin: -5px 0 0 -5px; width: 10px; height: 10px; border-radius: 50%; } #time-line-selector ul li a:hover, #time-line-selector ul li a.active{ background: #595959; color: #ffffff; } #time-line-selector ul li a:hover:after, #time-line-selector ul li a.active:after{ background: #e62b28; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="time-line-selector"> <ul style="width: 1054px;"><li class="time-line-selector"><a href="#" data-id-selector="1" data-year-selector="1935">1935</a></li><li class="time-line-selector"><a href="#" data-id-selector="2" data-year-selector="1946">1946</a></li><li class="time-line-selector"><a href="#" data-id-selector="3" data-year-selector="1995">1995</a></li><li class="time-line-selector"><a href="#" data-id-selector="4" data-year-selector="1996">1996</a></li><li class="time-line-selector"><a href="#" data-id-selector="5" data-year-selector="1997">1997</a></li><li class="time-line-selector"><a href="#" data-id-selector="6" data-year-selector="1998">1998</a></li><li class="time-line-selector"><a href="#" data-id-selector="7" data-year-selector="1999">1999</a></li><li class="time-line-selector"><a href="#" data-id-selector="8" data-year-selector="1935">1935</a></li><li class="time-line-selector"><a href="#" data-id-selector="9" data-year-selector="1946">1946</a></li><li class="time-line-selector"><a href="#" data-id-selector="10" data-year-selector="1995">1995</a></li><li class="time-line-selector"><a href="#" data-id-selector="11" data-year-selector="1996">1996</a></li><li class="time-line-selector"><a href="#" data-id-selector="12" data-year-selector="1997">1997</a></li><li class="time-line-selector"><a href="#" data-id-selector="13" data-year-selector="1998">1998</a></li><li class="time-line-selector"><a href="#" data-id-selector="14" data-year-selector="1999">1999</a></li><li class="time-line-selector"><a href="#" data-id-selector="15" data-year-selector="1935">1935</a></li><li class="time-line-selector"><a href="#" data-id-selector="16" data-year-selector="1946">1946</a></li><li class="time-line-selector"><a href="#" data-id-selector="17" data-year-selector="1995">1995</a></li><li class="time-line-selector"><a href="#" data-id-selector="18" data-year-selector="1996">1996</a></li></ul> </div> 

我喜歡做什么？ 我希望當用戶單擊某個日期時，可以使用滾動條將此日期集中化，有人知道該怎么做嗎？

小提琴： http ： //jsfiddle.net/vvtsvr3e/

Answer 1

嘗試在click事件處理程序的末尾添加以下行：

$("#time-line-selector").scrollLeft($(this).attr("data-id-selector") * $(this).parent().width() - $("#time-line-selector").width()/2 - $(this).parent().width()/2);

因此結果如下：

$("#time-line-selector ul li a").click(function (event) {

    event.preventDefault();

    $("#time-line-selector ul li a").removeClass("active");

    $(this).addClass("active");

    var yearId = $(this).attr("data-id-selector");

    $("#time-line-container ul").animate({
        "margin-left": -((yearId - 1) * timeLineContentWidth)
    }, 1000);
    $("#time-line-selector").scrollLeft($(this).attr("data-id-selector") * $(this).parent().width() - $("#time-line-selector").width()/2 - $(this).parent().width()/2);
});

或取消使用data-id-selector：

$("#time-line-selector").scrollLeft(($(this).parent().index(".time-line-selector") + 1 ) * $(this).parent().width() - $("#time-line-selector").width()/2 - $(this).parent().width()/2);

工作小提琴