如何滚动屏幕向左(如-100%)
问题描述:
我得到这个代码连接到我的div上http://g7media.cz/svilla/如何滚动屏幕向左(如-100%)
滚动到右侧的伟大工程,但我不能向左滚动的内容。
在这段代码中,我认为我滚动屏幕trought html和body来留下内容,就像我在另一边做的一样。
var screen_position =0;
var height=$(window).height()-$('.header').height()-$('.footer').height()-95;
$('.content').css('max-height', height);
$('a.toright').on('click', function(event) {
var screen_width=$(window).width();
var divwidth = $('.backgroundright').width();
if(screen_position == 0) {
$('html, body').animate({ scrollLeft: screen_width}, 800);
screen_position=screen_width;
$('.backgroundright').animate({'right': screen_width-divwidth}, 800);
}
else {
screen_position = screen_position-screen_width;
$('html, body').animate({ scrollLeft: screen_position}, 800);
$('.backgroundright').animate({'right': 0}, 800);
}
event.preventDefault();
//console.log(screen_position);
});
$('a.toleft').on('click', function(event) {
var screen_width=$(window).width();
var divwidth = $('.backgroundleft').width();
if(screen_position == 0) {
$('html, body').animate({ scrollLeft: 0-screen_width}, 800);
screen_position=screen_width;
$('.backgroundleft').animate({'left': 0-screen_width}, 800);
}
else {
screen_position = screen_position-screen_width;
$('html, body').animate({ scrollLeft: 0}, 800);
$('.backgroundleft').animate({'left': 0}, 800);
}
event.preventDefault();
//console.log(screen_position);
});
感谢您的建议。
答
您的代码有效。我只是将“滑动到左侧”div的位置移动到了正确的页面上,并且一切看起来都正常。它被留下:0;现在剩下了:100%;
更新这里的CSS:
.hometoleft {
background: url("/svilla/img/homepagetoleft.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
height: 407px;
left: 100%;
position: absolute;
top: 30%;
width: 124px;
z-index: 1;
}
其实我需要证明它有位置.backgroundleft内容左:-100%。为此,我想点击a.toleft并想将屏幕移动到左侧。 – 2014-10-06 16:06:09
你的代码也适用于此。 CSS是问题。 只需添加“z-index:1;”到style.css中的backgroundleft类(第93行)。 该页面正在生成动画,但低于其他所有图层,因此无法看到! 但是,仍然有一些与您的代码有关的工作,因为它将“左”按钮视为一个实体,并且正在切换左侧窗格而不是滚动回主页。 – Nick 2014-10-09 08:44:07
我弄错了这段代码。我想像我一样移动屏幕来滚动到右页。我使用的代码移动div“背景”的权利,但代替它,我想移动屏幕到这个div(左边的屏幕宽度)。所以它应该是这样的 $('html,body')。animate({scrollLeft:0-screen_width},800); ('。backgroundleft')。animate({'right':screen_width},800); – 2014-10-09 13:16:10