在HTML CSS中使用固定寬度水平滾動Javascript Angular JS

我有一個水平橫幅。在橫幅內，我有4個固定元素。第一個元素是圖像/鏈接。假定第二個固定元素用於向左滾動。第三個是固定寬度的元素，它會有圖像（數量不同，點擊第一個圖像會添加另一個圖像元素;第四個是另一個固定元素，假設用於向右滾動）在HTML CSS中使用固定寬度水平滾動Javascript Angular JS

我在互聯網上做了一些基本的搜索，發現幾個解決方案，但他們不爲我工作

用於導航的元素的寬度固定爲75px。第一個元素的寬度也固定爲100px，3元素將圖像計算calc（ 100％ - 250px）。

我已經使用overflow-x：隱藏第三個元素。

我使用代碼document.getElement（'.roll'）。scrollLeft + = 200;

這隻有當我定義像1000px那樣的元素的寬度時纔有效;當我修復並隱藏溢出時，我無法看到所有流動過度的元素，上面的代碼滾動也無法工作。

任何幫助，非常感謝。

來源

2017-07-26 Shashank B

我創建了一個Plunker演示滾動一個圖像的容器。

首先，我創建了一個處理導航和圖像容器組件的父組件。每當用戶點擊導航按鈕時，我將設置變換CSS屬性以將內部div移動多個像素。

外部div包含固定寬度設置爲285px，並且隱藏了溢出。

ImageContainer.js

ctrl.$onChanges = function(changes) { 
    console.log(changes); 
    // set the image width of all images 
    if (changes.imageSize) { 
    ctrl.imageStyle = {width: changes.imageSize.currentValue + 'px'}; 
    } 
    // update the scroll position 
    if (changes.scrollPosition) { 
    ctrl.scrollStyle = { transform: 'translateX(' + 
    changes.scrollPosition.currentValue + 'px)' }; 
    } 

}

imageContainer.html

<div class="flex fixed-image-container-width" > 
    <div class="flex scrolling" ng-style="$ctrl.scrollStyle"> 
    <div class="item" ng-repeat="item in $ctrl.items track by $index"> 
     <img ng-style="$ctrl.imageStyle" ng-src="{{item}}"/> 
     </div> 
    </div> 
</div>

來源

2017-07-27 04:53:15 LT56

非常感謝你的快速反應。我正在瀏覽該示例並在我的頁面中執行。如果我遇到任何問題，我會回來。 –

我現在面臨的一個問題是，包含圖像的容器的寬度是固定的，但是當最左邊的按鈕被點擊時，我將另一個圖像添加到列表中，在這種情況下，寬度正在增加並且離開屏幕。不知道如何確保它不會並保持不變。感謝你的幫助。 –

在HTML CSS中使用固定寬度水平滾動Javascript Angular JS

回答

相關問題