滚动HTML元素的内容,而不是整个窗口对象

Scrolling the content of an HTML element, rather than the whole window object

本文关键字:对象 窗口 元素 HTML 滚动      更新时间:2023-09-26

我手上有以下两个:

#elementA {
    position: absolute;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right, rgba(100,0,0,0.3), rgba(0,0,250,0.3));
    z-index: 250;
}
#containerofA {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 240;
    padding-bottom: 100px;  // to hide the horizontal scrollbar
    overflow-x: scroll;
}

作为divelementA再次以div的形式出现在containerofA内部。elementA的宽度是其容器宽度的两倍,并且可以通过触摸设备进行滚动。

这些已经发生了。我要做的是让elementA最初滚动到中间。我希望它要么定位在-50%最初,或50%在加载时向右滚动。

在JavaScript, CSS或HTML:如何做到这一点?

window.scroll(offset-x, offset-y);和变量滚动整个窗口,如果可以的话。这应该是一件很容易的事情,但是我不知道如何……

使用dom元素的scrollLeft属性

http://jsfiddle.net/hCN7n/

document.getElementById('containerofA').scrollLeft = 250;

试试这样:

 $(window).load(function() {
    $(element).scrollLeft(offset-left);
});

为什么不这样做呢:

.Container{
position:fixed;
width:100%;
height:100%;
overflow-x:scroll;
overflow-y:hidden;
}
.Elementcontained{
position:absolute;
margin:auto;
left:0;right:0;bottom:0;top:0;
width:200%;
height:100%;
}

应该可以了吧?

可以使用scrollTop和scrollLeft属性