horizontal scrollbar position is wrong in the RTL environment #151

zizxzy · 2023-03-01T13:27:36Z

Hello. when I use perfect-scrollbar in RTL environment, at the beginning, the horizontal scrollbar does not appear. when I resize my window, the horizontal scrollbar will appear at this time. But its position is on the left，it should be on the right. At the same time, the horizontal scrollbar can only move to the left. The following is the sample example

<!DOCTYPE html>
<html>
	<head>
		<title>perfect-scrollbar</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="./perfect-scrollbar.css" rel="stylesheet">
		<style>
			#device_scroll {
				float: left;
				background-color: grad;
				width: 100%;
				height: 521px;
				overflow: hidden;
				position: relative;
				direction: rtl;
			}
			/*滚动条*/
			/*y 是纵轴*/
			/*scrollbar背景*/
			.ps__rail-y {
				background-color: red;
			}
			/*静置时的样式*/
			.ps__thumb-y {
				background-color: green !important;
			}
			/*动态样式*/
			.ps .ps__rail-y:hover,
			.ps .ps__rail-y:focus,
			.ps .ps__rail-y.ps--clicking {
				background-color: red;
				opacity: 0.9;
			}
			.inside {
			width: 1600px;
			}
		</style>
	</head>
	<body>
		<div id="device_scroll">
			<div class="inside">
				dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />dddddddd
				<hr />
			</div>
		</div>
		<script src="./perfect-scrollbar.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//初始化滚动条scrollbar
			const ps = new PerfectScrollbar('#device_scroll', {
				//滚动速度，默认为1
				wheelSpeed: 1,
				//最小宽度 单位px
				suppressScrollX: false,
				//到达最低端时告知父元素
				wheelPropagation: true,
				//最小宽度
				minScrollbarLength: 20
			});
			$("#device_scroll").data("ps", ps);
			
			window.addEventListener("resize", function() {
				$('#device_scroll').data("ps").update();
			})
		</script>
	</body>
</html>

For solve this problem, I review the source code. In the source code, the this.isNegativeScroll is always false when in the RTL environment, so the this.negativeScrollAdjustment is always 0, resulting in an incorrect position calculation of the horizontal scroll bar position. When I change this.isNegativeScroll to this.isRtl, the horizontal scrollbar behaves normally.

// 1188line
  this.isNegativeScroll = (function () {
      var originalScrollLeft = element.scrollLeft;
      var result = null;
      element.scrollLeft = -1;
      result = element.scrollLeft < 0;
      element.scrollLeft = originalScrollLeft;
      return result;
    })();
    this.negativeScrollAdjustment = this.isNegativeScroll
      ? element.scrollWidth - element.clientWidth
      : 0;

// 1280line
    // Recalcuate negative scrollLeft adjustment
    this.negativeScrollAdjustment = this.isNegativeScroll
      ? this.element.scrollWidth - this.element.clientWidth
      : 0;

The text was updated successfully, but these errors were encountered:

Lan-megumi · 2023-12-06T02:48:55Z

I also has same issue, i hope scrollbar position on left instead of right

My solution is add ps__rail-y class rule like:

.ps__rail-y{
    right: 0 !important;
    left: auto !important;
}

But there is a disadvantage, that is, in a low-speed environment, the transition animation of the scroll bar from left to right will appear (like flickering).

This is a temporary solution

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

horizontal scrollbar position is wrong in the RTL environment #151

horizontal scrollbar position is wrong in the RTL environment #151

zizxzy commented Mar 1, 2023 •

edited

Loading

Lan-megumi commented Dec 6, 2023 •

edited

Loading

horizontal scrollbar position is wrong in the RTL environment #151

horizontal scrollbar position is wrong in the RTL environment #151

Comments

zizxzy commented Mar 1, 2023 • edited Loading

Lan-megumi commented Dec 6, 2023 • edited Loading

zizxzy commented Mar 1, 2023 •

edited

Loading

Lan-megumi commented Dec 6, 2023 •

edited

Loading