HTML CSSで固定幅の横スクロールJavascript Angular JS

Question

私は横のバナーを持っています。バナーの中には、4つの固定要素があります。最初の要素は画像/リンクです。 2番目の固定要素は、左にスクロールするために使用されると仮定します。 3番目は固定幅の要素であり、数字が変わり、1番目の画像をクリックするともう1つの画像要素が追加されます4thはもう1つの固定要素がスクロールに使用されると仮定します。

インターネットで基本的な検索を行いました。いくつかの解決策が見つかりましたが、私のために働いていません。

ナビゲーションに使用する要素の幅は75pxのように固定されています。最初の要素の幅も100pxのように固定されています。 100％〜250px）

3番目の要素にoverflow-x：hiddenを使用しました。

コードdocument.getElement（ '。scroll'）を使ってスクロールしようとしました。scrollLeft + = 200;

これは、1000pxのような要素の幅を定義する場合にのみ機能します。私はそれを固定し、オーバーフローを隠すとき、私は流れる上にあるすべての要素を見ることができませんまた、スクロールする上記のコードも動作しませんでした。

ご迷惑をおかけして申し訳ありません。

Answer 1

画像のコンテナをスクロールすることを示すPlunkerを作成しました。

まず、ナビゲーションと画像コンテナコンポーネントを処理する親コンポーネントを作成しました。ユーザーがナビゲーション上のボタンをクリックするたびに、内側のdivをピクセル数だけ移動するように変換CSSプロパティを設定しています。

外側の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>