javascript - 如何在不移动父元素的情况下加载在特定位置显示 div 的页面

标签 javascript html css

我有一个页面,比方说1000px宽的。我在那个页面上有一个 div,它是 3000px宽的。加载时,div 将显示第一个 1000px3000px直到我滚动。我想要做的是在位置显示 div 1000px - 2000px ,因此,就好像它已经被滚动了一样1000px ,因此它位于“中间”位置。

如果我使用 left: 1000px; 来做到这一点然后我的可滚动 div 不再滚动,或者第一个 1000pxdiv不再可达。 (我应该提到我正在尝试在移动设备上执行此操作,因此使用 -webkit-overflow-scrolling: touch; 技巧让此 div 以“ native ”方式反弹。

如果有人能想到如何做到这一点,我仍然无法滚动浏览整个 3000px,我对如何让它发挥作用有些困惑。 div 但从位置 1000px 开始,那就太棒了。

最佳答案

这可能有帮助:http://jsfiddle.net/uDy9B/

<div class="wrap">
    <div class="green"></div>
    <div class="red"></div>
    <div class="brown"></div>
    <div class="clear"></div>
</div>

风格:

div.wrap {
    width:3000px;
    height:300px;
    background-color:orange;
    position:relative;
}
.wrap > div {
    width:1000px;
    height:200px;
}
.green { background-color:green; float:left; }
.red { background-color:red; float:left; }
.brown { background-color:brown; float:left; }

.clear {clear:both;}

j查询:

$("html, body").animate({ scrollLeft: '1000px' }, 1000);

关于javascript - 如何在不移动父元素的情况下加载在特定位置显示 div 的页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21237366/

相关文章:

javascript - 在 Protractor 测试中设置来自 localStorage 的项目

javascript - react-styleguidist - 以 Component 作为 Prop 的示例 - SyntaxError : Cannot use import statement outside a module

javascript - 将 JavaScript 代码重构为 jQuery 代码

html - 视差滚动的问题

jquery - 为什么我自己的 jQuery 工具提示在第二次单击输入字段后没有隐藏?

Javascript:如何在立即调用创建对象时访问公共(public)成员变量

javascript - 设置外部 Javascript 的过期时间

html - 如何在CSS中用颜色覆盖图像?

html - 包含一行的 Bootstrap 容器

html - 将 2 个 50% 宽度的输入元素排成一行,理解框大小