Скролл (grab) при зажатии правой клавиши мыши

Question

Как сделать, чтобы при зажатии правой клавиши мыши внутри блока trust-list и устремлении курсора влево/вправо выполнялся скролл в соответствующую сторону? Пробовал также делать прокрутку колесом мыши, но не сработало.

.trust-list li {
    flex: 0 0 auto;
    width: 269px;
    height: 326px;
    border-radius: 10px;
    padding: 22px 14px 9px 14px;
    background: #fdfdfd;
    box-shadow: 0px 5px 18px -4px #00000026;
    border: 1px solid #0000000a;
    margin: 0 36px 51px 0px;
}

.trust-list h4 {
    text-align: center;
    color: black;
    font-weight: 600;
    margin-top: 18px;
    margin-bottom: 18px;
}

.trust-list img {
    width: 77%;
    margin: 0 auto !important;
    display: block;
}

.trust-list:active {
    cursor: grabbing;
}

.trust-list {
    display: flex;
    justify-content: space-between;
    padding: 0;
    width: 100%;
    margin: 65px auto -54px auto;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    cursor: grab;
}

.trust-list p {
    font-size: 18px;
    text-align: center;
    font-family: Futura, sans-serif;
    color: black;
    padding: 0 11px;
    font-weight: 300;
}

.trust-list::-webkit-scrollbar {
    height: 12px !important;
    cursor: pointer;
}

.trust-list::-webkit-scrollbar {
    background: #ececec;
    border-radius: 100px;
    overflow: hidden;
    width: 40%;
}

.trust-list::-webkit-scrollbar-thumb {
    background: blue;
}

<ul class="trust-list">
       <li>
        <img src="https://images.by.prom.st/173730501_w640_h640_ustanovka-i-nastrojka.jpg">
           <h4>Работа по договору</h4>
           <p>При сотрудничестве заключаем договор с печатью и данными юр. лица</p>
        </li>       
           <li>
        <img src="https://images.by.prom.st/173730501_w640_h640_ustanovka-i-nastrojka.jpg">
           <h4>Работа по договору</h4>
           <p>При сотрудничестве заключаем договор с печатью и данными юр. лица</p>
        </li> 
             <li>
        <img src="https://images.by.prom.st/173730501_w640_h640_ustanovka-i-nastrojka.jpg">
           <h4>Работа по договору</h4>
           <p>При сотрудничестве заключаем договор с печатью и данными юр. лица</p>
        </li> 
             <li>
        <img src="https://images.by.prom.st/173730501_w640_h640_ustanovka-i-nastrojka.jpg">
           <h4>Работа по договору</h4>
           <p>При сотрудничестве заключаем договор с печатью и данными юр. лица</p>
        </li> 
             <li>
        <img src="https://images.by.prom.st/173730501_w640_h640_ustanovka-i-nastrojka.jpg">
           <h4>Работа по договору</h4>
           <p>При сотрудничестве заключаем договор с печатью и данными юр. лица</p>
        </li> 
             <li>
        <img src="https://images.by.prom.st/173730501_w640_h640_ustanovka-i-nastrojka.jpg">
           <h4>Работа по договору</h4>
           <p>При сотрудничестве заключаем договор с печатью и данными юр. лица</p>
        </li> 
             <li>
        <img src="https://images.by.prom.st/173730501_w640_h640_ustanovka-i-nastrojka.jpg">
           <h4>Работа по договору</h4>
           <p>При сотрудничестве заключаем договор с печатью и данными юр. лица</p>
        </li> 
             <li>
        <img src="https://images.by.prom.st/173730501_w640_h640_ustanovka-i-nastrojka.jpg">
           <h4>Работа по договору</h4>
           <p>При сотрудничестве заключаем договор с печатью и данными юр. лица</p>
        </li> 
      </ul>

БЛОГ НА HUSL

Скролл (grab) при зажатии правой клавиши мыши

Ответы (0 шт):