CODEWITHSUNDEEP
javascriptjquery
Morteza Negahi
Morteza Negahi

Reputation: 232

how to set only vertical for perfect scroll in rtl direction

I used perfect-scroll but this plugin put Y and X scroll bars. How to disable x scroll?

I found this page but haven't codes ..

$(document).ready(function ($) {
    $('.sidebar').perfectScrollbar({
        useBothWheelAxes: false
    })
});

Upvotes: 6

Views: 9553

Answers (2)

SUHAIL KC
SUHAIL KC

Reputation: 430

I have a similar issue with RTL layout.

I fixed horizontal scrolling of my sidebar by using css direction: ltr; to perfect-scrollbar element (<div class="sidebar"> in my case) and then direction: rtl; to inner elements (<div class="sidebar-body"> in may case).

<body class="rtl">
  <div class="sidebar">
    <div class="sidebar-body">
      .......
    </div>
  </div>
</body>

.

.rtl {
  direction: rtl;
  text-align: right;
  .sidebar {
    direction: ltr; // This is the fix
    .sidebar-body {
      direction: rtl; // Then change to rlt back
    }
  }
}

I hope this will help you. sorry for my bad English :)

Upvotes: 2

Izzet Yildirim
Izzet Yildirim

Reputation: 650

To suppress the scroll bar in X axis simply set suppressScrollX to true as follows. 

$(document).ready(function ($) {
    $('.sidebar').perfectScrollbar({
        useBothWheelAxes: false,
        suppressScrollX: true
    })
});

Upvotes: 6

Related Questions