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

<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，那么它会转到每个特定的标题only.and第二个是页面加载第一个标题时，说明会自动加载，所以如何做到这两件事？无法在html中添加垂直滚动条？

来源

2016-10-18 Prashant Bangar

添加包装。

溢出滚动进入所有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创建两个不同的包装器。

来源

2016-10-18 07:25:50

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

回答

相关问题