HTML CSS Javascript Angular JS中具有固定宽度的水平滚动

Question

我有一个水平横幅。在横幅内，我有 4 个固定元素。第一个元素是图像/链接。第二个固定元素假设用于向左滚动。第三个是固定宽度的元素，它将有图像(数量各不相同，单击第一个图像将添加另一个图像元素。 4th是另一个固定元素，用于向右滚动。

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

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

我已经使用了溢出-x：hidden 作为第三个元素。

我尝试使用代码文档.getElement('.scroll'(.scrollLeft += 200;

这只有在我定义该元素的宽度(如 1000px(时才有效;当我修复它并隐藏溢出时，我无法看到所有溢出的元素，上面的滚动代码也不起作用。

任何帮助都非常感谢。

Answer 1

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

首先，我创建了一个处理导航的父组件和一个图像容器组件。每当用户单击导航上的按钮时，我都会设置转换 CSS 属性以将内部div 移动多个像素。

外部div 包含一个设置为 285px 的固定宽度，并隐藏溢出。

图像容器.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)' };
}
}

图像容器.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>