简体   繁体   English

使用负的scrollTop / scrollLeft值进行动画处理

[英]Animate with a negative scrollTop/scrollLeft value

I have 4 sections surrounding the absolute positioned section and need to be able to click the list items to animate to them. 我在绝对定位的部分周围有4个部分,需要能够单击列表项以使其具有动画效果。 This works fine for two of sections but for the section with a left: -100 and the right: -300 doesn't animate. 这对于两个部分的效果很好,但对于左侧为-100和右侧:-300的部分则不设置动画。 Is there a way to make scrollTop and Left work with a negative value? 有没有一种方法可以使scrollTop和Left以负值工作?

DEMO 演示

$('#hilolink').click(function() {
    $('body, html').animate({
        scrollLeft: $('#hiLo').offset().left
    }, 500);
});
$('.hiloback').click(function() {
    $('body, html').animate({
        scrollLeft: $('#allGames').offset().left
    }, 500);
});
$('#simonSays').click(function() {
    $('body, html').animate({
        scrollTop: $('#simon').offset().top
    }, 500);
});
$('.simonback').click(function() {
    $('body, html').animate({
        scrollTop: $('#allGames').offset().top
    }, 500);
});
$('#rock').click(function() {
    $('body, html').animate({
        scrollTop: $('#rockPaper').offset().top
    }, 500);
});
$('.rockback').click(function() {
    $('body, html').animate({
        scrollTop: $('#allGames').offset().top
    }, 500);
});
$('#dance').click(function() {
    $('body, html').animate({
        scrollLeft: $('#danceDance').offset().left
    }, 500);
});
$('.rockback').click(function() {
    $('body, html').animate({
        scrollLeft: $('#allGames').offset().left
    }, 500);
});

According to this https://www.w3schools.com/jsref/prop_element_scrollleft.asp you can't have negative values in either scrollLeft or scrollRight: 根据此https://www.w3schools.com/jsref/prop_element_scrollleft.asp,您不能在scrollLeft或scrollRight中都使用负值:

If the number is a negative value, the number is set to "0" 如果该数字为负值,则将该数字设置为“ 0”

But you can try placing your elements with a sufficient added offset (making sure none of them is positioned in a negative offset) and define a new origin which would be considered as your 0,0, let say 1000,1000. 但是,您可以尝试将元素放置在具有足够大的偏移量的位置(确保没有一个元素位于负偏移量),并定义一个新的原点,该原点将被视为您的0,0,比如说1000,1000。 Upon initialization, reset your scroll offset to this origin, and do all your scrolling relative to that new origin. 初始化后,将滚动偏移量重置为该原点,然后相对于该新原点进行所有滚动。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM