gpt4 book ai didi

javascript - 无法在html中添加垂直滚动条?

转载 作者:行者123 更新时间:2023-11-28 05:01:07 24 4
gpt4 key购买 nike

<body  ng-app="myApp" ng-controller="myCtrl">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle" style="width: 25%;">
<a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
<a href="" style="text-decoration: none;" ng-if="!x.title"># No title</a>
<hr style="color: red">
</a>
</b>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">
<div style="float: right;">
<img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
</div>
<div style="color: purple;text-align: center;font-size:21px">
{{x.title}}
</div><br>
<div>
{{x.text}}
</div>
<b>
URL:-
</b>
<a href="{{x.url}}" style=" color: blue;"> To see in details, click here! </a><br> <br>
</div>
</div>
</div>
</div>

我正在研究新闻提要模块。我有两个 div,在第一个 div(左侧)列表中显示所有新闻标题,在右侧 div 显示关于该标题的描述和图像。但我无法在左侧 div 上添加垂直滚动条(title-div),如果我应用 div,那么它只会转到每个特定的标题。第二个是当页面加载第一个标题时,描述将自动加载,那么如何做这两件事呢?

最佳答案

添加包装器。

溢出滚动到所有 tittle,因为 title 类在 ng-repeat 中,因此对每个单独的标题重复。

ng-repeat 之外添加另一个包装 div,并对其应用溢出滚动。

    <div class="wrapper">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle" style="width: 25%;">
<a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
<a href="" style="text-decoration: none;" ng-if="!x.title"># No title</a>
<hr style="color: red">
</a>
</b>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">
<div style="float: right;">
<img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
</div>
<div style="color: purple;text-align: center;font-size:21px">
{{x.title}}
</div><br>
<div>
{{x.text}}
</div>
<b>
URL:-
</b>
<a href="{{x.url}}" style=" color: blue;"> To see in details, click here! </a><br> <br>
</div>
</div>
</div>
</div>
</div><!-- .wrapper -->

并将overflow:scroll添加到wrapper。

.wrapper {
overflow:scroll;
}

请注意,这将为标题和文本组合创建滚动。因为它们在单个包装中。如果你想要不同的话,你将不得不用两个不同的 ng-repeat 创建两个不同的包装器。

关于javascript - 无法在html中添加垂直滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40101795/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com