水平滑動滾動（不滾動條），如果div內容溢出

我想創建一個div的CSS（最好沒有任何庫），其內容可以滑鼠右/左鼠標點擊如果div的內容大於div寬度。如下圖所示：水平滑動滾動（不滾動條），如果div內容溢出

我試圖與溢出滾動，但給人的滾動條是不是我想要的。是否可以使用CSS和JavaScript（AngularJS，我在我的應用程序中使用）創建此組合，而不使用任何其他庫？如果可以使用jQuery，我可以使用jQuery。

更新：在@ Shnibble的回答後創建了working demo。

$("#left").mousedown(function() { 
    var y = $("#content").offset(); 
    $("#content").animate({ 
    left: 0 
    }, function callback() { 
     $("#left").fadeOut(); 
    }); 

}); 

$("#right").mousedown(function() { 
    var y = $("#content").offset(); 
    $("#left").show(); 
    $("#content").animate({ 
    left: y.left - 200 
    }); 
    $("#info").text(y.left - 100); 
});

來源

2016-08-25 Rishabh

請參閱本網站：http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery – Anju

該網站有一些不同於我想。它使用項目超鏈接滑動到不同的div。我不會使用任何超鏈接和不同的div。只需簡單的內容 - 在同一個div內滑動。 – Rishabh

我不知道我知道你想要什麼，你想要的<>箭頭滾動的內容或你想擊+拖動左側和右側的內容？兩者都可以用JQuery來完成。

前者可以通過將父容器定位爲relative和content定位爲absolute來完成。然後，您可以使用JQuery根據點擊哪個箭頭來更改content +/-的left偏移量。

對於後者，您將執行相同的設置，但在點擊時檢查鼠標座標並將差異應用於contentleft屬性，直到釋放鼠標按鈕。

至於所有這些只發生在內容溢出的情況下，您需要再次使用JQuery進行一些檢查以測量content的寬度，並將其與父容器進行比較，並僅允許上述函數之一如果content更寬，則運行。

另外，你合作使用overflow-x: auto，然後風格的滾動條，以適應你的主題更好？見這裏：https://css-tricks.com/custom-scrollbars-in-webkit/。

來源

2016-08-25 12:16:10 Shnibble

我會使用<>箭頭滾動內容。不太熟悉jQuery，所以會從頭開始嘗試。根據您發佈的教程，滾動條樣式功能僅適用於webkit。 – Rishabh

謝謝！得到它的工作:) – Rishabh

太棒了！很高興我能幫上忙 – Shnibble

水平滑動滾動（不滾動條），如果div內容溢出

回答

相關問題