การรักษาตำแหน่งการเลื่อนเนื้อหา md ระหว่างมุมมองที่แตกต่างกันภายใน ngView

ฉันรู้ด้วย AngularJs และการใช้ ngView ตำแหน่งการเลื่อนจะยังคงอยู่เมื่อนำทางกลับไปและไปข้างหน้าระหว่างมุมมองที่ต่างกัน ตอนนี้ฉันได้ใช้คำสั่งวัสดุเชิงมุม md-toolbar และ md-content ในมุมมองของฉันแล้ว แต่มันไม่คงตำแหน่งการเลื่อนไว้

มีวิธีแก้ไขใดที่จะรักษาตำแหน่งการเลื่อนของ md-content ระหว่างมุมมองที่แตกต่างกันภายใน ngView หรือไม่

โค้ดด้านล่างนี้จะทำให้เกิดปัญหาขึ้นอีกครั้ง และนี่คือตัวอย่างการสาธิต: demo

ดัชนี.html:

<body layout="row" ng-app="scrollPostion">
    <div flex layout="column" layout-fill ng-view> </div>
    <md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
        <md-list>
           <md-list-item>
               <a href="/th#/page1">page1</a> 
           </md-list-item>
           <md-list-item>
               <a href="/th#/page2">page2</a>
           </md-list-item>
        </md-list>
    </md-sidenav>

  <script type="text/javascript">
    angular
        .module('scrollPostion', ['ngRoute', 'ngMaterial'])
        .config(['$routeProvider', function ($routeProvider) {
            $routeProvider.
            when('/', {
                templateUrl: 'page1.html',
            }).
                when('/page1', {
                    templateUrl: 'page1.html',
                }).
            when('/page2', {
                templateUrl: 'page2.html',
            }).
            otherwise({ redirectTo: '/' })
        }])
     </script>
</body>

ดู 1 (หน้า 1):

<md-toolbar layout="row" class="md-toolbar-tools">
   <h1>Page1</h1>
</md-toolbar>
<md-content flex id="content">
    <div>
      <p>long text1</p>      
    </div>
</md-content>

ดู 2 (หน้า 2):

<md-toolbar layout="row" class="md-toolbar-tools">
   <h1>Page2</h1>
</md-toolbar>
<md-content flex id="content">
    <div>
      <p>long text2</p>      
    </div>
</md-content>

ฉันรู้ว่าปัญหาเกิดขึ้นจากคำสั่ง md-content เพราะเมื่อฉันแทนที่ด้วย div การรักษาตำแหน่งการเลื่อนไว้จะได้ผล แต่ฉันต้องการ md-toolbar และ md-content ภายในมุมมองของฉัน


person Asieh Mokarian    schedule 12.11.2015    source แหล่งที่มา


คำตอบ (1)


การรักษาตำแหน่งการเลื่อนโดยอัตโนมัติเป็นหน้าที่ของเบราว์เซอร์ และเบราว์เซอร์จะรักษาตำแหน่งการเลื่อนของทั้งหน้าเท่านั้น ไม่ใช่ตำแหน่งการเลื่อนขององค์ประกอบภายในของหน้า

ในตัวอย่างของคุณเมื่อใช้ md-content เนื่องจากมี overflow:auto และ height:100% และ min-height:100% หน้าเว็บไม่มีการเลื่อนใดๆ และอย่างที่คุณเห็นการเลื่อนเป็นของ md-content ดังนั้นอย่างที่ฉันบอกว่าเบราว์เซอร์ไม่สามารถรักษาตำแหน่งการเลื่อนได้ เนื่องจาก scroll เป็นขององค์ประกอบภายใน

สำหรับกรณี div เนื่องจากโดยค่าเริ่มต้น div จะขยายเป็นเนื้อหาขนาดใหญ่ ดังนั้นการเลื่อนจึงอยู่ในเพจและเบราว์เซอร์จะคงตำแหน่งการเลื่อนไว้

ในการแก้ปัญหา:

  • คุณสามารถใช้แท็กและสไตล์ผสมกันเพื่อทำให้เพจเลื่อนและได้รับตำแหน่งการเลื่อนอัตโนมัติ
  • คุณยังสามารถจัดเก็บตำแหน่งการเลื่อนของ md-content ของคุณไว้ในโมเดลของคุณหรือที่อื่น และเมื่อแสดงหน้า ให้ใช้ตำแหน่งนั้นกับ md-content ของคุณ
person Reza Aghaei    schedule 13.11.2015