gpt4 book ai didi

jquery - 使用 div 环绕的平滑 div 滚动

转载 作者:行者123 更新时间:2023-11-28 13:24:54 24 4
gpt4 key购买 nike

所以...我正在使用在这里找到的 Smooth Div Scroll 插件... http://www.smoothdivscroll.com/

它的实现很简单...所以我正在使用触摸示例唯一的区别是……我使用的是 Div 而不是图像……来滚动浏览。

<div id="makeMeScrollable">
<div class='item'>One</div>
<div class='item'>Two</div>
<div class='item'>Three</div>
<div class='item'>Four</div>
<div class='item'>Five</div>
<div class='item'>Six</div>
<div class='item'>Seven</div>
<div class='item'>Eight</div>
<div class='item'>Nine</div>
<div class='item'>Ten</div>
</div>

我的js在这里

$(document).ready(function() {
$("#makeMeScrollable").smoothDivScroll({
hotSpotScrolling : false,
touchScrolling : true,
manualContinuousScrolling : false,
mousewheelScrolling : false
});

CSS

.item {
height: 35px;
width: 245px;
}

#makeMeScrollable {
width: 100%;
position: relative;
border: solid 1px black;
margin: 43% 0% 0% 0%;
}

#makeMeScrollable div.scrollableArea div {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
border: black solid 1px;
color: white;
background-color: #1E90FF;
text-align: center;
}

问题是,当我这样做时...我是前九个 div...一个接一个...最多大约 6 个,然后我可以单击并滚动查看其余部分。最多 9...问题是 Div 10由于某种原因环绕并位于 Div 1 下方。

我认为这是因为 scollableArea 包装器 div我通过调用可滚动函数得到的 10 个 div 太短了几个像素。它设置为自动,所以它应该(我假设)自动将自己设置为足够大......

我想我可以破解它并动态扩展它几个像素,它会很好......因为我尝试在 chrome 开发人员中增加它的像素......

所以是的...我会张贴截图...但我不能...因为我是新来的哈哈

最佳答案

如果从 CSS 中删除边框,会发生什么吗?

#makeMeScrollable div.scrollableArea div {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
border: none;
color: white;
background-color: #1E90FF;
text-align: center;
}

是否可以给 div 一个固定的宽度?像这样的东西:

#makeMeScrollable div.scrollableArea div {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
border: black solid 1px;
color: white;
background-color: #1E90FF;
text-align: center;
width: 300px;
}

关于jquery - 使用 div 环绕的平滑 div 滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14288279/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com