만 - VoidCC

묶는 수직 스크롤 막대를 제거하고 마우스 휠뿐만 아니라 그것의 제거 목록 또는 다른 div에서 수평 스크롤을 유지합니다.만
```
body { 
    overflow-x: hidden; 
} 

::-webkit-scrollbar { 
    width: 0 !important 
} 
```
어떻게에만 CSS/JS를 사용하여 수평 스크롤을 설계하고 마우스 휠을 추가 할 수 있습니까?

감사 세로 스크롤 막대를 제거하기위한 많은

2017-01-21 Scopi

당신은 마우스 휠을 유지하여 무엇을 의미합니까? – Shubhranshu

body{ 
 
     width:500px; 
 
     background-color: grey; 
 
    } 
 
#div1{ 
 
    background-color:blue; 
 
    width:500px; 
 
    height:500px; 
 
    overflow-x:scroll; 
 
    } 
 
#div2{ 
 
    background-color:red; 
 
    width:600px; 
 
    height:300px; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    </head> 
 
    
 
    <body> 
 
    <div id="div1"> 
 
     <div id="div2"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing 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> 
 
    </body> 
 
</html>

#main{ 
 
    
 
    width:200px; 
 
    height:200px; 
 
    background:red; 
 
    overflow-x:scroll; 
 
    overflow-y:none; 
 
    }

<div id='main'> 
 
    
 
    </div>

출처

2017-01-21 09:10:16

에 도움이 될 수 있지만 마우스가 작동하지 않으며 페이지가 붙어 – Scopi

div 태그를 body 태그에 추가하고 body 태그 너비를 고정하십시오. 나는 그것이 작품이라고 생각한다 –

나에게 예를 보여줄 수 있겠 니? – Scopi

body{ 
overflow-y: hidden; 
}

출처

2017-01-21 09:05:09 Shubhranshu

thx하지만 mousewheel이 작동하지 않고 페이지가 붙어 – Scopi

http://www.dte.web.id/2013/02/event-mouse-wheel.html이 링크는 Scopi – Shubhranshu

#divId{width:400px;height:200px;background:magenta;} 
 
#wrap{width:200px;height:100px; 
 
overflow-x:scroll;}

<div id="wrap"> 
 
<div id="divId"></div></div>

출처

2017-01-21 09:11:08

만

답변

관련 문제