点击功能滚动div不工作

这里是我有一个代码的jfiddle，当单击右箭头按钮时，假设要移动div（50px现在）。但是，我似乎错过了一些东西，因为按下按钮时它不会滚动。使用Chrome检查我看到的JavaScript正在用 '视图' 是执行15px的点击功能滚动div不工作

https://jsfiddle.net/cm014krh/1/

HTML：

<div class="sortable-outer"> 
    <div class="pc-row sortable"> 
    <div class="pc-col-xs-4"></div> 
    <div class="pc-col-xs-4"></div> 
    <div class="pc-col-xs-4"></div> 
    <div class="pc-col-xs-4"></div> 
    </div> 
</div> 
<div class="bnr-fpc-fs-controls-control right lg left-arrow-button"> 
    <svg width="32" height="32" viewBox="0 0 32 32" id="carousel_arrow" x="287" y="384.561"> 
    <path d="M16 0c8.836 0 16 7.164 16 16s-7.164 16-16 16S0 24.836 0 16 7.164 0 16 0zm0 29c7.168 0 13-5.832 13-13S23.168 3 16 3 3 8.832 3 16s5.832 13 13 13zM13.5 9c.39 0 .743.153 1.01.398l.004-.003 6 5.5a1.5 1.5 0 0 1 0 2.21l-6 5.5-.003-.003c-.267.245-.62.398-1.01.398a1.5 1.5 0 0 1-1.5-1.5c0-.438.19-.828.49-1.102l-.004-.003L17.28 16l-4.794-4.395.003-.003A1.49 1.49 0 0 1 12 10.5 1.5 1.5 0 0 1 13.5 9z" 
    fill="#818091" fill-rule="evenodd" /> 
    </svg> 
</div> 
<div class="bnr-fpc-fs-controls-control next lg right-arrow-button"> 
    <svg width="32" height="32" viewBox="0 0 32 32" id="carousel_arrow" x="287" y="384.561"> 
    <path d="M16 0c8.836 0 16 7.164 16 16s-7.164 16-16 16S0 24.836 0 16 7.164 0 16 0zm0 29c7.168 0 13-5.832 13-13S23.168 3 16 3 3 8.832 3 16s5.832 13 13 13zM13.5 9c.39 0 .743.153 1.01.398l.004-.003 6 5.5a1.5 1.5 0 0 1 0 2.21l-6 5.5-.003-.003c-.267.245-.62.398-1.01.398a1.5 1.5 0 0 1-1.5-1.5c0-.438.19-.828.49-1.102l-.004-.003L17.28 16l-4.794-4.395.003-.003A1.49 1.49 0 0 1 12 10.5 1.5 1.5 0 0 1 13.5 9z" 
    fill="#818091" fill-rule="evenodd" /> 
    </svg> 
</div>

CSS：

.sortable { 
    min-width: 729px; 
} 

.sortable-outer { 
    overflow-x: scroll; 
} 

.pc-row { 
    width: 1750px; 
} 

.pc-col-xs-4 { 
    width: 320px; 
    margin-right: 30px; 
    float: left; 
    height: 100px; 
    background-color: red; 
} 

.left-arrow-button { 
    transform: rotate(180deg); 
} 

.left-arrow-button:hover, .right-arrow-button:hover { 
    background-color: yellow; 
}

和JavaScript：

$('.right-arrow-button').click(function() { 
    var view = $('.sortable'); 
    var move = "50px"; 
    var sliderLimit = -234; 

    var currentPosition = parseInt($('.sortable').offset().left); 
    if (currentPosition >= sliderLimit) $('.sortable').stop(false, true).animate({ 
    left: "-=" + move 
    }, { 
    duration: 400 
    }); 
});

来源

2017-03-28 Blaris

为[**这**]（https://jsfiddle.net/cm014krh/4/）你想达到什么目的？您正尝试对内部内容进行动画制作，此时您应该使用滚动条'sortable-outer'来动画div。在这种情况下，你会使用'scrollLeft'，而不是'left'。 – Santi

@Santi正是我想要做的。我使用的源仅用于左侧，但看起来他们是这样做的，因为他们有全长的div，并根据需要使用“左”进行调整。谢谢。如果您提出完整评论，我会将其标记为正确。 – Blaris

我相信什么错在这里有两方面：

你试图动画内 div，尽管我相信你应该滚动外部 div，这是sortable-outer。

2.在这种情况下，如果您要滚动，您可能需要使用scrollLeft，而不仅仅是left。

var $view = $('.sortable'); 
 
var move = "50px"; 
 

 
$('.right-arrow-button').click(function() { 
 
    var currentPosition = parseInt($view.offset().left); 
 
    $('.sortable-outer').stop(false, true).animate({ 
 
     scrollLeft: "+=" + move 
 
    }, { 
 
     duration: 400 
 
    }); 
 
}); 
 

 

 
$('.left-arrow-button').click(function() { 
 
    var currentPosition = parseInt($view.offset().left); 
 
    $('.sortable-outer').stop(false, true).animate({ 
 
     scrollLeft: "-=" + move 
 
    }, { 
 
     duration: 400 
 
    }); 
 
});

.sortable { 
 
    min-width: 729px; 
 
} 
 

 
.sortable-outer { 
 
    overflow-x: scroll; 
 
} 
 

 
.pc-row { 
 
    width: 1750px; 
 
} 
 

 
.pc-col-xs-4 { 
 
    width: 320px; 
 
    margin-right: 30px; 
 
    float: left; 
 
    height: 100px; 
 
    background-color: red; 
 
} 
 

 
.left-arrow-button { 
 
    transform: rotate(180deg); 
 
} 
 

 
.left-arrow-button:hover, 
 
.right-arrow-button:hover { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sortable-outer"> 
 
    <div class="pc-row sortable"> 
 
     <div class="pc-col-xs-4"></div> 
 
     <div class="pc-col-xs-4"></div> 
 
     <div class="pc-col-xs-4"></div> 
 
     <div class="pc-col-xs-4"></div> 
 
    </div> 
 
</div> 
 
<div class="bnr-fpc-fs-controls-control right lg left-arrow-button"> 
 
    <svg width="32" height="32" viewBox="0 0 32 32" id="carousel_arrow" x="287" y="384.561"> 
 
     <path d="M16 0c8.836 0 16 7.164 16 16s-7.164 16-16 16S0 24.836 0 16 7.164 0 16 0zm0 29c7.168 0 13-5.832 13-13S23.168 3 16 3 3 8.832 3 16s5.832 13 13 13zM13.5 9c.39 0 .743.153 1.01.398l.004-.003 6 5.5a1.5 1.5 0 0 1 0 2.21l-6 5.5-.003-.003c-.267.245-.62.398-1.01.398a1.5 1.5 0 0 1-1.5-1.5c0-.438.19-.828.49-1.102l-.004-.003L17.28 16l-4.794-4.395.003-.003A1.49 1.49 0 0 1 12 10.5 1.5 1.5 0 0 1 13.5 9z" 
 
     fill="#818091" fill-rule="evenodd" /> 
 
    </svg> 
 
</div> 
 
<div class="bnr-fpc-fs-controls-control next lg right-arrow-button"> 
 
    <svg width="32" height="32" viewBox="0 0 32 32" id="carousel_arrow" x="287" y="384.561"> 
 
     <path d="M16 0c8.836 0 16 7.164 16 16s-7.164 16-16 16S0 24.836 0 16 7.164 0 16 0zm0 29c7.168 0 13-5.832 13-13S23.168 3 16 3 3 8.832 3 16s5.832 13 13 13zM13.5 9c.39 0 .743.153 1.01.398l.004-.003 6 5.5a1.5 1.5 0 0 1 0 2.21l-6 5.5-.003-.003c-.267.245-.62.398-1.01.398a1.5 1.5 0 0 1-1.5-1.5c0-.438.19-.828.49-1.102l-.004-.003L17.28 16l-4.794-4.395.003-.003A1.49 1.49 0 0 1 12 10.5 1.5 1.5 0 0 1 13.5 9z" 
 
     fill="#818091" fill-rule="evenodd" /> 
 
    </svg> 
 
</div>

来源

2017-03-28 20:56:37 Santi

几件事：

$('.sortable')没有捕获任何东西。
你想要scrollLeft而不是left。 left引用对象的位置偏移量，即它将使值右移left值。
移动值不需要后缀px。
您不需要保护动画，因为它永远不会超出限制。

下面的代码：

https://jsfiddle.net/cm014krh/5/

来源

2017-03-28 20:55:55 Jack

点击功能滚动div不工作

回答

相关问题