如何將滾動箭頭按鈕添加到左側和右側滾輪

Question

您好我想知道是否可以替換左右移動的滾動條，並在左側和右側放置某種類型的箭頭，以便滾動或通過左右滾動條移動，使其更容易。

在這裏看到該網站的圖片，明白我的意思：

http://s3.postimg.org/7dlnenzbl/nonavigation.png

這裏是鏈接到該網站：

http://aster.themevillage.net/

感謝。

Answer 1

你可以這樣做：

document.addEventListener('DOMContentLoaded', function() { 
 
    var buttonR = document.getElementById('buttonR'); 
 
    var buttonL = document.getElementById('buttonL'); 
 
    var container = document.getElementById('container'); 
 

 
    buttonR.onclick = function() { 
 
    container.scrollLeft += (window.innerWidth/2); 
 
    }; 
 

 
    buttonL.onclick = function() { 
 
    container.scrollLeft -= (window.innerWidth/2); 
 
    }; 
 
}, false);

#container{ 
 
    width: 1280px /*screen width*/; 
 
    overflow:scroll; 
 
} 
 
#content{ 
 
    width: 700vw /*width of your page content*/; 
 
} 
 
    
 
#buttonR, #buttonL { 
 
    position: fixed; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    width: 75px; 
 
    background: grey; 
 
    font-size: 30px; 
 
} 
 

 
#buttonR{ 
 
    right: 100px; 
 
} 
 

 
#buttonL{ 
 
    left: 100px; 
 
}

<div id="container"> 
 
    <div id="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div id="buttonR">></div> 
 
    <div id="buttonL"><</div> 
 
</div>