How to move the vertical scroll bar from right to left without using direction: rtl? Because of this property, even though it is on the left, what needs to be displayed leaves and js does not work correctly with the element and this is a discomfort for my visitors. Maybe there is already a jQuery library for this? I would be happy to help.

    1 answer 1

    I chose two answer choices from this question.

    Both suggest the presence of an additional element around where the left-hand scrolling is needed.

    In the first case, rtl used

    In the second case transform used. Older browsers may require the -ms-transform or -webkit-transform prefixes.

    The demo class is used only for visual demonstration here on the StackOverflow website.

     .demo { max-height: 100px; } .parent { overflow: auto; transform: scaleX(-1); } .sleeve { transform: scaleX(-1); } .parent2 { unicode-bidi: bidi-override; direction: rtl; overflow: scroll; overflow-x: hidden!important; } .sleeve2 { direction: ltr; } 
     <div class="parent"> <div class="sleeve demo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Quis imperdiet massa tincidunt nunc pulvinar sapien. Netus et malesuada fames ac turpis egestas. Justo nec ultrices dui sapien eget. Varius duis at consectetur lorem donec massa sapien faucibus. Turpis cursus in hac habitasse platea. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec donec et odio pellentesque diam volutpat. Amet volutpat consequat mauris nunc congue nisi vitae. Eu nisl nunc mi ipsum faucibus vitae aliquet. Justo eget magna fermentum iaculis. Sit amet consectetur adipiscing elit pellentesque habitant morbi. Enim neque volutpat ac tincidunt vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Quis imperdiet massa tincidunt nunc pulvinar sapien. Netus et malesuada fames ac turpis egestas. Justo nec ultrices dui sapien eget. Varius duis at consectetur lorem donec massa sapien faucibus. Turpis cursus in hac habitasse platea. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec </div> </div> <div class="parent2"> <div class="sleeve2 demo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Quis imperdiet massa tincidunt nunc pulvinar sapien. Netus et malesuada fames ac turpis egestas. Justo nec ultrices dui sapien eget. Varius duis at consectetur lorem donec massa sapien faucibus. Turpis cursus in hac habitasse platea. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec donec et odio pellentesque diam volutpat. Amet volutpat consequat mauris nunc congue nisi vitae. Eu nisl nunc mi ipsum faucibus vitae aliquet. Justo eget magna fermentum iaculis. Sit amet consectetur adipiscing elit pellentesque habitant morbi. Enim neque volutpat ac tincidunt vitae. </div> </div>

    • Thank! Very helpful. - Egor Belov
    • It remains to receive from the author an answer to the question “why the hell are you?” ... - Inquisitor