2 개의 테이블에서 세로 스크롤 막대를 숨기지 만 한 테이블에서 전체 스크롤 허용

Question

전체 테이블을 함께 스크롤 할 수 있지만 오른쪽에 하나의 세로 스크롤 막대가 있어야합니다. (스크롤은 마우스 오른쪽 화살표 또는 화살표를 사용하여 오른쪽의 세로 스크롤 막대를 사용하여 수행 할 수 있습니다.)

.fixedTable-body에서 세로 스크롤 막대를 숨길 수는 없으며 마우스 휠 또는 화살표가 .fixedTable-sidebar 및 .fixedTable-body 테이블을 가리키면 오른쪽의 세로 스크롤바가 이상하게 작동합니다.

내가 할 수 있었다 무엇 :

• 구현하고 ( 아래 바이올린 작업에 JS) 모든 테이블 본체에서 스크롤을 연결; 내가 가진 무엇

.fixedTable-sidebar::-webkit-scrollbar { 
    display: none; /* hide scrollbar for Webkit Browsers */ 
} 
.fixedTable-sidebar { 
    -ms-overflow-style: none; /* hide scrollbar for IE */ 
} 

: - 웹킷 브라우저와 IE에 대한 .fixedTable-sidebar에서

숨기기 수직 스크롤 (은 FF에 대한 숨길 수있는 해결책을 발견하지 않은 경우)>이은에 의해 수행되었다 웹킷 브라우저

• 의사 클래스 :vertical,하지만 작동하지 않습니다 시도 ; 이 -ms-overflow-y-style가 IE를 위해 존재하지만 내가 시도 중 하나가 작동하지 않는 경우

.fixedTable-body::-webkit-scrollbar:vertical { 
    display: none; 
} 

• 확실하지;

  .fixedTable-body { 
      -ms-overflow-y-style: none; 
  } 
  
또한 패딩 수직 스크롤을 숨길려고했는데, 그것을 할 수 없습니다.

---

EDIT

I 이너 확인 후, 두 요소의 외측 div를 생성하고 overflow: hidden함으로써 .fixedTable-sidebar 및 .fixedTable-body에서 수직 스크롤바를 숨길 수 있었다 요소 .fixedTable-sidebar 및 .fixedTable-body 조금 큰 width > 100% ->이 때문에 스크롤바를 숨길 수있었습니다. 모든 브라우저에서 사용할 수 있습니다.

이제 유일한 문제 오른쪽 세로 스크롤 막대의 동작 때 당신이 원하는 경우,

See Updated Fiddle

Answer 1

글쎄, 나는 테이블의 중앙에 수직 막대를 숨길 수 솔루션을 찾았지만 오른쪽에서 수직 막대는 여전히 이상한 역할을하지만, 여기 누군가가 그것을 :) 필요로하는 경우에 간다

---

나는 두 요소의 외부 DIV를 생성하고 제공함으로써 .fixedTable-sidebar 및 .fixedTable-body에서 수직 스크롤을 숨길 수 있었다 overflow: hidden, 내부 요소를 만듭니다. .fixedTable-sidebar 및 .fixedTable-body 약간 더 큰 width > 100% -> 내가 모든 브라우저 스크롤을 숨길 수 있었다 이와 - 그래서 크로스 브라우저 솔루션

Updated Fiddle입니다>-> 만 1 수직 및 1 수평 스크롤 테이블 (내부에 여러 테이블 고정 헤더)와

PS : 나는 수직 스크롤의 이상한 행동에 대한 또 다른 질문을 엽니 다, 나는 여기에 링크를 : 게시합니다

Answer 2

가 좋아 (마우스 휠 또는 키패드의 화살표를 사용하여)을 .fixedTable-sidebar 및 .fixedTable-body 이상 스크롤 스크롤 막대를 숨기려면 스크롤을 계속할 수 있어야합니다.일반적으로, 그것이 내가 최신 브라우저 (사파리, 크롬과 오페라)를 호출하고있는 무슨을 위해 작동합니다

html { 
    overflow: scroll; 
    overflow-x: hidden; 
} 
::-webkit-scrollbar { 
    width: 0px; /* remove scrollbar space */ 
    background: transparent; /* optional: just make scrollbar invisible */ 
} 
/* optional: show position indicator in red */ 
::-webkit-scrollbar-thumb { 
    background: #FF0000; 
}