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

Unable to add vertical scroll bar in html?

本文关键字：添加 垂直 滚动条 html      更新时间：2023-09-26
<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>

我正在新闻feed模块上工作。我有两个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 {
  overflow:scroll;
}

注意，这将同时为标题和文本创建滚动。因为它们在一个包装中。如果您想要不同的，则必须使用两个不同的ng-repeat创建两个不同的包装器。

相关文章：