javascript - 在 HTML CSS Javascript Angular JS 中以固定宽度水平滚动

Question

我有一个水平横幅。在横幅内，我有 4 个固定元素。第一个元素是图像/链接。第二个固定元素假设用于向左滚动。第 3 个是一个固定宽度的元素，它将包含图像(数字会有所不同，点击第一个图像将添加另一个图像元素。第 4 个是另一个固定元素，假设用于向右滚动。

我在互联网上进行了一些基本搜索，发现的解决方案很少，但它们对我不起作用。

用于导航的元素宽度固定为 75px。第一个元素的宽度也固定为 100px，将有图像的 3 个元素计算为 calc(100% - 250px)。

我对第三个元素使用了 overflow-x:hidden。

我尝试使用代码 document.getElement('.scroll').scrollLeft += 200; 滚动

只有当我将该元素的宽度定义为 1000px 时，这才会起作用；当我修复它并 overflow hidden 时，我看不到所有溢出的元素，上面的滚动代码也不起作用。

非常感谢任何帮助。

Answer 1

我创建了一个 Plunker演示滚动图像容器。

首先，我创建了一个处理导航的父组件和一个图像容器组件。每当用户单击导航上的按钮时，我都会设置 transform 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>