如何将滚动箭头按钮添加到左侧和右侧滚轮

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>