2013-07-31 25 views
5

Bất cứ khi nào tôi nhấp vào hộp kiểm, cửa sổ trình duyệt (firefox) sẽ cuộn trên đầu màn hình.
Làm cách nào để ngăn chặn hành vi này vì vậy khi tôi nhấp vào hộp kiểm, cửa sổ trình duyệt sẽ không cuộn lên trên đầu?
Đây là mã được tìm thấy từ đây http://jsfiddle.net/zAFND/6/
Cảm ơn bạn.Làm cách nào để ngăn trình duyệt di chuyển trên đầu trang khi nhấp vào hộp kiểm?

<html> 
    <head> 
     <title>Test</title> 
     <style> 
      div label input { 
       margin-right: 100px; 
      } 

      body { 
       font-family:sans-serif; 
      } 

      #ck-button { 
       margin: 4px; 
       background-color: #EFEFEF; 
       border-radius: 4px; 
       border: 1px solid #D0D0D0; 
       overflow: auto; 
       float: left; 
      } 

      #ck-button { 
       margin: 4px; 
       background-color: #EFEFEF; 
       border-radius: 4px; 
       border: 1px solid #D0D0D0; 
       overflow: auto; 
       float: left; 
      } 

      #ck-button:hover { 
       margin: 4px; 
       background-color: #EFEFEF; 
       border-radius: 4px; 
       border: 1px solid red; 
       overflow: auto; 
       float: left; 
       color: red; 
      } 

      #ck-button label { 
       float: left; 
       width: 4.0em; 
      } 

      #ck-button label span { 
       text-align: center; 
       padding: 3px 0px; 
       display: block; 
      } 

      #ck-button label input { 
       position: absolute; 
       top: -20px; 
      } 

      #ck-button input:checked + span { 
       background-color: #911; 
       color: #fff; 
      } 
     </style>  
</head> 
    <body> 
     <br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <div id="ck-button"> 
      <label> 
       <input type="checkbox" value="1"><span>red</span> 
      </label> 
     </div> 
    </body> 

Trả lời

21

Vấn đề là quy tắc này:

#ck-button label input { 
    position:absolute; 
    top:-20px; 
} 

Khi bạn bấm vào một nhãn trình duyệt cố gắng tập trung đầu vào liên quan. Trong trường hợp của bạn, phần tử hộp kiểm nằm ở đầu trang của trang, ngay cả ở bên ngoài chế độ xem. Vì vậy, Firefox cố gắng cuộn ở đó.

Tôi nghĩ rằng bạn có thể giải quyết nó như thế này bằng cách thêm:

#ck-button label { 
    display: block; 
    position: relative; 
    overflow: hidden; 
} 

Demo

Try before buy

Sửa

Như tôi trở lại câu trả lời này hôm nay và liên quan đến Heisenberg's: Ông p gợi ý một vấn đề có thể xảy ra bằng cách sử dụng các giá trị cực đoan và bổ sung thêm một giải pháp khác về cơ bản có cùng tính cách như tôi.

Để tránh những quirks có thể xảy ra, đây là một giải pháp khả thi khác đơn giản bằng cách ẩn đầu vào. Chức năng này không bị ảnh hưởng, vì bạn có thể kiểm tra trong liên kết bên dưới.

CSS

#ck-button label input { 
    display: none; 
} 

Demo

Second demo

+1

yep cảm ơn bạn đã làm việc. – themis

+1

Tôi đã tìm thấy câu trả lời của bạn vì tôi đang sử dụng tiện ích con xếp hạng sao đã sử dụng -9999 cho vị trí của các nút radio của nó. Cảm ơn! –

3

bạn có thể giấu vào hộp kiểm của bạn như thế này:

13

Các câu trả lời được chấp nhận không hoàn toàn đúng. Hoạt động, nhưng không phải trong mọi trường hợp.

Nếu bạn sử dụng css chung để ẩn các yếu tố (có thể là -999em hoặc tương đương) tại các thuộc tính "top", trong trường hợp này position: relative có gì để làm vì luôn -999em sẽ cao hơn nhiều so với khung nhìn .

Câu trả lời được chấp nhận hoạt động tốt vì "đầu" chỉ là -20px. Hãy thử đặt số này cao hơn và bạn sẽ thấy vấn đề.

Vì vậy, giải pháp không được đặt vị trí tương đối. Tôi nghĩ rằng cách chính xác chỉ là đặt giá trị âm ở vị trí bên trái (không phải trên cùng).

Hãy dùng thử. :)

+0

Thực tế điều này hoạt động. câu trả lời được chấp nhận thêm phần đệm đầu và phần này giải quyết vấn đề này, cảm ơn! – hansaplast

+0

Cảm ơn bạn đã chỉ ra một vấn đề trong [câu trả lời của tôi] (http://stackoverflow.com/a/17974351/1456376). Tôi đã cập nhật nó cho phù hợp. Ngoài ra giải pháp của bạn là một khả năng khác, nó có cùng một sự gian lận như tôi. Cố gắng đặt giá trị cho 'left' rất cao, như:' # ck-button label input {position: absolute; bên trái: -10000px; } '. Bạn có thể thấy nó trong [demo on jsfiddle] (http://jsfiddle.net/rnxaf4ve/). Bạn sẽ không thể nhấp vào nút trong Trình duyệt Webkit (Chrome và Safari) và nó cũng không hoạt động trong Firefox theo yêu cầu. – insertusernamehere

Các vấn đề liên quan