Javascript的中心水平滚动包含LI
Javascript center horizontal scroll on containing LI
只使用JavaScript(没有jquery) -我想让它,所以当一个列表项有一个'active'的类,它是居中的容器
最终的结果将是一个旋转木马,其中"活动"的李将在页面的中心,点击另一个李将使其活跃,然后它将自动居中(滚动)。我遇到的问题是,我似乎不能把它放在中心开始。宽度是页面的100%,所以宽度是动态的。
任何帮助都太好了。
html:<div id="container">
<ul id="carousel">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="active">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
css: html, body {margin:0;padding:0;height:100%;width:100%;}
ul{
position:relative;
width:100%;
height:322px;
margin:0 auto;
padding:0;
overflow-x:hidden;
white-space: nowrap;
}
li{
position:relative;
display:inline-block;
padding:0;
margin-right:20px;
list-style-type:none;
width:200px;
height:200px;
top: 70px;
background-color:#efefef;
border:1px solid #d3d3d3;
border-radius: 12px;
}
li:first-child {
margin-left: 20px;
}
li.active {
top: 20px;
width:300px;
height:300px;
}
javascript: var r = document.getElementById('carousel').offsetWidth;
var l = document.getElementById('carousel').scrollWidth;
var m = r / 2;
document.getElementById('carousel').scrollLeft = 0;
document.getElementById('carousel').scrollLeft = m;
您必须从m
中减去活动<li>
宽度的一半和前一个<li>
之间的空间
相关文章:
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 幻灯片滚动javascript不起作用
- 货币代码为欧元-金额的格式不应包含小数
- 将视口底部滚动到元素底部
- jQuery Lazy加载动画滚动
- 如何包含特定于每个视图angularjs的javascript文件
- 设置滑块分区上的滚动
- 结合jQuery和jetpack无限滚动
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- 我如何修复包含在captcha的addthis中的错误
- 正在注入包含JS的HTML
- iframe允许在与openzoom一起使用时在包含页面中滚动
- 在包含 JSON 数据的表中实现无限滚动
- Android原生应用程序:无法滚动浏览包含大约200个元素的整个列表(appium java客户端)
- 包含foreignObject的可滚动SVG中的错误
- 需要帮助来在angularjs + ionic的花式选择中包含无限滚动
- 当url包含锚点时,在页面加载中获取网页滚动条的垂直位置
- 如何在 if 语句中包含鼠标滚动和单击事件
- 如何使画布可滚动,以包含多个页面扫描pdf
- Javascript的中心水平滚动包含LI