在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

回答

相关问题