點擊功能滾動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不工作

回答

相關問題