Question

我在固定宽度内有一个水平滑动的元素线，所以你必须向左滚动才能看到所有元素。请参阅下面的JS Fiddle和纯文字示例。

Hi | Hello | How do you do | Fine thanks | Good weather this time of year

我的问题是：我如何居中任何给定元素？例如。将元素编号3的水平中心放在周围div的水平中心。

如果元素不能居中，因为它位于行的开头，例如，那没关系，那么H位置应该只是0.它应该只有可以< / em> be。

Answer 1

这样的事情？您可以使用以下原生属性scrollLeft，offsetLeft和offsetWidth的组合。

＆＃13;

var items = document.querySelectorAll('.wrapper ul li');

function centerItems(which) {
  var wrapper = items[which].offsetParent;
  wrapper.scrollLeft = 
    (items[which].offsetLeft + items[which].offsetWidth / 2)
      - wrapper.offsetWidth / 2;
}

＆＃13;

html {
	background: #eee;
}
body {
	width: 320px;
	background: white;
	font-family: sans-serif;
}

.wrapper {
   overflow-x: scroll;
   position: relative;
}

ul {
   white-space: nowrap;
}

li {
    display: inline-block;
    color: #898;
    background: #efe;
    padding: 8px;
}

＆＃13;

<p>Hello!</p>

<button onclick="centerItems(0)">1</button>
<button onclick="centerItems(1)">2</button>
<button onclick="centerItems(2)">3</button>
<button onclick="centerItems(3)">4</button>
<button onclick="centerItems(4)">5</button>

<div class="wrapper">
    <ul>
        <li>Short</li>
        <li>Very long line here</li>
        <li>Medium line</li>
        <li>Another one Another one Another one</li>
        <li>Yet another</li>
    </ul>
</div>

<p>Goodbye!</p>

＆＃13;

将任何元素置于滑动水平线上

1 个答案: